html2canvas

基本使用

import html2canvas from "html2canvas";

// html2canvas(element, options);
html2canvas(document.body).then(function (canvas) {
  document.body.appendChild(canvas);
});

options 对象里可以配置 ignoreElements 可以隐藏某些元素不被 canvas 绘制，更多参数参考 https://html2canvas.hertzen.com/configuration/

功能实现

• 遍历 DOM 节点，按照样式和合适的层级将其绘制在 canvas 上
• 如果遇到 canvas 节点，会将其内容作为图像绘制到 canvas 上
• 通过 canvas.toDataURL() 生成图像

canvas 跨域

options 配置的 allowTaint 可以配置为 true，允许加载跨域图片

实现原理是读取到 img 节点时，将其转换成 base64 数据，再通过 drawImage 绘制到 canvas 上