New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

html-to-image 原理 #96

Open

nmsn opened this issue Jul 17, 2023 · 1 comment

Labels

Owner

nmsn commented Jul 17, 2023

No description provided.

nmsn added the JavaScript label

Owner Author

nmsn commented Jul 17, 2023

核心逻辑

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment