使用html2canvas.js将前端页面生成图片，并下载图片

1、使用html2canvas.js之前，要先下载，因为我的项目的是JQuery,我直接在官网上下载html2canvas.min.js

下载地址：https://github.com/niklasvh/html2canvas/releases

2.html2canvas.js的基本使用

html2canvas的配置地址：

http://html2canvas.hertzen.com/configuration

element是你想要截图的DOM元素

      let element = document.querySelector("firstPhoto");
      let imgWidth = element.offsetWidth;
      let imgHeight = element.offsetHeight;
      window.pageYOffset = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      let configObj = {
        allowTaint: true,
        useCORS: true,
        tainttest: true, // 检测每张图片都已经加载完成
        logging: true,
        scale: 2, //画布的宽度用于渲染的比例。 默认为浏览器设备像素比。
        dpi: 300, //提高截图的精度
        width: imgWidth, //画布的宽度
        height: imgHeight, //画布的高度
        backgroundColor: `rgb(143,40,37)`, // 转换图片可能会有白色底色，你可根据你的页面或者PM 要求设置一下背景色，不要的话就null
      };
      //我的项目中有echarts图表，如果不加定时器，就会出现图表的数据还没有渲染完毕，截图的图片已经绘制完成，导致图表数据只显示一部分的情况
      setTimeOut(function () {
        html2canvas(element, configObj).then((canvas) => {
          let imgUrl = canvas.toDataURL("image/jpeg");
          //imgUrl是截图后图片的地址，是base64格式的
          const aDom = document.createElement('a')
          aDom.href = imgUrl
          aDom.download = new Date().valueOf() + '.png' // 图片的名字
          aDom.click()
        });
      }, 1000);

注意点：

1.字体如果是渐变色，html2canvas是无法渲染的，背景色是可以的

2.如果截取的图片中有echarts图表，可能出现图表数据渲染不全的问题，我的解决方法是：

setTimeOut(function () {
        html2canvas(element, configObj).then((canvas) => {
          let imgUrl = canvas.toDataURL("image/jpeg");
          //imgUrl是截图后图片的地址，是base64格式的
          const aDom = document.createElement('a')
          aDom.href = imgUrl
          aDom.download = new Date().valueOf() + '.png' // 图片的名字
          aDom.click()
        });
}, 1000);

2.当你要截图的页面过长的时候，就会出现背景色渲染不全或者是没有渲染的情况，为了保证图片的清晰度，我的解决方法是：将整个页面截取为多张图片，然后用canvas绘制到一张图片上