html-to-image 原理

[nmsn]

[nmsn]

核心逻辑

• dom 元素转化为 canvas
  • dom 元素转化为 svg
    • 创建 foreignObject 对象，插入 dom 节点
    • svgToDataURL 将 svg 节点转化为图片 url
      • XMLSerializer().serializeToString() 将 dom 节点转化为字符串
      • 通过 encodeURIComponent 转义
      • 拼接 data:image/svg+xml;charset=utf-8,${html} 字符串
  • createImage 创建 canvas 元素，绘制 svg
    • url 通过 new Image，img.src = url 成功创建图片
    • 创建 canvas 将图片绘制到 canvas 上
• toPng
  • canvas.toDataURL 转化为图片