【Vue】实现页面截图、保存图片功能

前言

大家好，我是南木元元，热衷分享有趣实用的文章。

html2canvas简介

html2canvas库允许我们直接在浏览器上拍摄网页或部分网页的“屏幕截图”，即浏览器实现截图的功能。

• 原理

屏幕截图是基于DOM的。其基本原理就是读取已经渲染好的DOM元素的结构和样式信息，然后基于这些信息去构建截图，呈现在canvas画布中。

如何使用

安装

npm install html2canvas

引入

import html2canvas from 'html2canvas';

用法

可以只传一个参数，就是你要截图的DOM元素，该函数返回一个Promise对象，在它的then方法中可以获取到绘制好的canvas对象，通过调用canvas对象的toDataURL方法就可以将其转换成图片。

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

也可以根据需要设定配置项html2canvas(element, options)。具体可以参考官网：https://html2canvas.hertzen.com/configuration

实现保存图片

• 需要截图区域

 <div class="box" ref="imgBox">
 这里就是截图的区域
 </div>
 <el-button @click="saveImg" type="primary">点击保存图片</el-button>

• 保存图片的方法

即使页面有滚动条也可进行相应配置，实现完整截图。
有两种方式来实现保存图片：
1.将URL放到a标签的href属性中，点击超链接来实现图片下载。

saveImage() {
   html2canvas(this.$refs.imgBox, {
     height: this.$refs.imgBox.scrollHeight,	
     width: this.$refs.imgBox.scrollWidth,
   }).then((canvas) => {
     const link = document.createElement("a"); // 创建一个超链接对象实例
     link.download = "Button.png"; // 设置要下载的图片的名称
     link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
     link.click(); // 触发超链接的点击事件
   });
 },

2.打开一个新的窗口，实现图片保存。

saveImage() {
   html2canvas(this.$refs.imgBox, {
     height: this.$refs.imgBox.scrollHeight,	
     width: this.$refs.imgBox.scrollWidth,
   }).then((canvas) => {
     let dataURL = canvas.toDataURL("image/png");
     var blob = this.changeToBlob(dataURL);//获取blob对象
     var url = URL.createObjectURL(blob);
     window.open(url);//创建一个新的浏览器窗口对象, 参数指定了该窗口将会打开的地址
   });
 },
 //Base64 to Blob
 changeToBlob(dataURL) {
    var arr = dataURL.split(","),
      type = arr[0].match(/:(.*?);/)[1],//获取MIME 类型，即image/png
      bstr = atob(arr[1]),
      count = bstr.length,
      u8arr = new Uint8Array(count);
    while (count--) {
      u8arr[count] = bstr.charCodeAt(count);
    }
    return new Blob([u8arr], {
      type: type,
    });
  },

结语

本文主要分享了在vue中通过html2canvas插件来保存图片，其主要步骤为：

• html转为canvas：基于html2canvas.js可将一个元素渲染为canvas，然后Promise对象会将截取的图片传递给参数canvas。
• canvas转image：上一步生成的canvas即为包含目标元素的canvas元素对象。实现保存图片的目标只需要将canvas转image即可。基于原生canvas的toDataURL方法将canvas输出为data: URI类型的图片地址。
• 图片下载：将其放到a标签的href属性中或者打开一个新的窗口，实现图片的保存下载。

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~