使用 html2canvas 生成图片

1、Html2Canvas 概述

html2canvas允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

官方文档：https://html2canvas.hertzen.com/documentation

2、使用Html2Canvas截图

这里还是通过vue项目来进行说明，先安装依赖。

npm install html2canvas

官网用法说明：要element使用带有一些（可选）选项的 html2canvas 渲染，只需调用html2canvas(element, options);

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

首先我们在指定的vue页面先将html2canvas导入。

import html2canvas from "html2canvas";

假设我们这里有一个canvas对象，是通过echart绘制的一个图，其对应的html代码如下：

<div id="myChart" class="myChart"></div>

之后我们给添加一个下载按钮，直接触发downloadImg事件。先直接获取canvas的toDataURL得到的是一个base64编码后的图片数据，之后我们只需要将这个base64的数据生成图片下载下来即可。

    /**
     * 下载图片
     */
    downloadImg() {
      console.log("download ....");
      html2canvas(document.querySelector("#myChart")).then((canvas) => {
          var url = canvas.toDataURL();
          this.downloadFile(url, "中国地图");
      });
    },
    /**
     * @description Base64转Blob
     * @param dataUrl base64地址
     */
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    /**
     * @description 构建a标签，通过a标签下载文件
     * @param url 下载地址
     * @param name 下载的文件名
     */
    downloadFile(url, name = "中国地图") {
      var a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("download", name);
      a.setAttribute("target", "_blank");
      let clickEvent = document.createEvent("MouseEvents");
      clickEvent.initEvent("click", true, true);
      a.dispatchEvent(clickEvent);
    },
    /**
     * @description 将得到的base64文件转码下载
     * @param base64 图片base64编码
     * @param name 文件名称
     */
    downloadFileByBase64(base64, name) {
      var myBlob = this.dataURLtoBlob(base64);
      var myUrl = URL.createObjectURL(myBlob);
      this.downloadFile(myUrl, name);
    },