一. html2canvas简介
html2canvas库允许我们直接在浏览器上拍摄网页或部分网页的“屏幕截图”，即浏览器实现截图的功能。
原理：
屏幕截图是基于DOM的。其基本原理就是读取已经渲染好的DOM元素的结构和样式信息，然后基于这些信息去构建截图，呈现在canvas画布中。
二. 如何使用
1.安装
npm install html2canvas
2.引入
import html2canvas from 'html2canvas';
3.用法
可以只传一个参数，就是你要截图的DOM元素，该函数返回一个Promise对象，在它的then方法中可以获取到绘制好的canvas对象，通过调用canvas对象的toDataURL方法就可以将其转换成图片。
html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); });
也可以根据需要设定配置项html2canvas(element, options)。具体可以参考官网：https://html2canvas.hertzen.com/configuration
4.实现保存图片
需要截图区域
<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, }); },
三. 总结
通过html2canvas保存图片的主要步骤：
1.html转为canvas
基于html2canvas.js可将一个元素渲染为canvas，然后Promise对象会将截取的图片传递给参数canvas。
2.canvas转image
上一步生成的canvas即为包含目标元素的canvas元素对象。实现保存图片的目标只需要将canvas转image即可。
基于原生canvas的toDataURL方法将canvas输出为data: URI类型的图片地址。
3.图片下载
将其放到a标签的href属性中或者打开一个新的窗口，实现图片的保存下载。
