html2Canvas 前端保存页面为图片

html2canvas

前言：前端保存页面为图片，最常见的方案都是利用html2canvas来生成图片。

• html2canvas详细介绍
• html2canvas官网

应用场景
PM要求将公司子公司...获得的一些奖项，前端按要求展示；并且要把H5页面的局部保存图片分享出去。

解决方案：html2canvas
使用：

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;
  // console.warn(element);
  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");
    console.warn(imgUrl); 
  });
}

• 到此你就把H5页面某个节点区域绘制成图片了，或许你又会发现绘制的图片多多少少有些模糊，这里建议把节点区域的涉及到的背景图片都换成来渲染。

下载：

// 创建隐藏的可下载链接
let eleLink = document.createElement("a");
eleLink.href = imgUrl; // 转换后的图片地址
eleLink.download = "pictureName";
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);

这里需要注意的是：a标签的download属性，虽然可以下载，但是兼容不好，好多不支持。浏览器如何不做兼容还是可以用的，比如Chrome。
所以移动端的话建议原生提供接口，除此你可以做个引导，比如在微信里面长按来保存等一系列操作。

最后，在进行 H5 开发时，一旦考虑到微信，就有可能出现一些之前考虑不到的问题和限制，对此，产品经理和程序员都要尽可能地多多了解。知道在微信中，能干什么，不能干什么，降低开发和反复沟通的成本。