html-to-image 原理 - Githubissues

nmsn / blog

记录日常遇到的问题，需要记录的笔记以及新学到的知识，会进行汇总和分类，自动更新 README，欢迎评论和补充，互相学习

36 stars 0 forks source link

html-to-image 原理 #96

Open nmsn opened 1 year ago

nmsn commented 1 year ago

核心逻辑

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 转化为图片