DOM生成图片原理

工作原理

使用svg的一个特性，允许在<foreignobject>标签中包含任意的html内容。（主要是 XMLSerializer | MDN这个api将dom转为svg） 所以，为了渲染那个dom节点，你需要采取以下步骤：

1. 递归 clone 原始的 dom 节点
2. 获取 节点以及子节点 上的 computed style，并将这些样式添加进新建的style标签中（不要忘记了clone 伪元素的样式）
3. 嵌入网页字体

• 找到所有的@font-face
• 解析URL资源，并下载对应的资源
• base64编码和内联资源 作为 data: URLS引用
• 把上面处理完的css rules全部都放进<style>中，并把标签加入到clone的节点中去

1. 内嵌图片(都转成dataUrl)

• 内联图片src 的url 进 <img>元素
• 背景图片 使用 background css 属性，类似fonts的使用方式