html2Canvas 前端保存页面为图片

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。

使用：

1. npm install --save html2canvas
2. 将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);