html2Canvas 前端保存页面为图片
html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。
使用：
npm install --save html2canvas- 将html2canvas引入到组件中
import html2canvas from "html2canvas"
具体：
取局部dom节点作为转换图片的绘制：<div ref="canvasImgObj" class="jiangzhuang-item">
canvasImgObj需要是你想转换的页面内容的父容器，即你想转换的页面内容需要全部包含在imageDom节点内。
转换方法如下：
/** * 将页面指定节点内容转为图片
*1.拿到想要转换为图片的内容节点DOM；
* 2.转换，拿到转换后的canvas
* 3.转换为图片
*/ // 生成局部图片
GenerateImg() {
let element = this.$refs.canvasImgObj;
html2canvas(element[this.slideIndex], {
// 我这里是一个swiper，要是一个页面的话直接element就行
allowTaint: true, useCORS: true, tainttest: true, // 检测每张图片都已经加载完成 logging: true, backgroundColor: `rgb(143,40,37)`, // 转换图片可能会有白色底色，你可根据你的页面或者PM要求设置一下背景色，不要的话就null
}).then((canvas) => {
// 转成图片，生成图片地址
let imgUrl = canvas.toDataURL("image/jpeg");
});
}
到此你就把H5页面某个节点区域绘制成图片了，或许你又会发现绘制的图片多多少少有些模糊，这里建议把节点区域的涉及到的背景图片都换成来渲染。
下载：
// 创建隐藏的可下载链接
let eleLink = document.createElement("a");
eleLink.href = imgUrl;
// 转换后的图片地址
eleLink.download = "pictureName";
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
