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});
}

一款免费开源的 JavaScript 数据库——PouchDB

一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti

javascript利用pinyin库把汉字转拼音（不带声调）

JavaScript库读取Excel数据代码示例

字节跳动（掘金社区）出品MarkDown编辑器——ByteMD

标签： dom-to-image, html2canvas, JavaScript库

上面是“html2canvas生成图片后下载太慢解决方法（dom-to-image）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_5104.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！