html2canvas生成图片后下载太慢解决方法（dom-to-image）

问题描述：利用html2canvas插件把div内容生成png图片并且下载，运气好的时候会有几秒钟延迟，有时候会出现10s延迟。

解决方法：利用dom-to-image插件来替换html2canvas插件。

dom-to-image 是一个将 DOM 元素转换成图片的 JavaScript 库。它可以将网页中的某个元素转换为图片，并支持将多个元素转换为同一图片中的叠加效果。

具体实现步骤如下：

1、引入js库

<script src="/js/dom-to-image.min.js"></script>

2、执行photo按钮代码：

function photo(){
  var node = document.querySelector("#map");
  domtoimage.toPng(node).then(function (dataUrl) {
    downloadFile('下载图片名称.png',dataUrl);
  });
};

function downloadFile(fileName, content) {
  let aLink = document.createElement('a');
  let blob = base64ToBlob(content); //new Blob([content]);
  let evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", true, true);
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
}

function base64ToBlob(code) {
  let parts = code.split(';base64,');
  let contentType = parts[0].split(':')[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;
  let uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {type: contentType});
}