摘要：前言看到大神了，也一直很好奇怎么轉那么就翻下源碼，看下是如何實現的，其實一共就不到行代碼，還蠻容易讀懂的工作原理使用的一個特性，允許在標簽中包含任意的內容。

看到 TJ 大神 star了dom-to-image，也一直很好奇html怎么轉 image

那么就翻下源碼，看下是如何實現的，其實一共就不到800行代碼，還蠻容易讀懂的

使用svg的一個特性，允許在標簽中包含任意的html內容。（主要是 XMLSerializer | MDN這個api將dom轉為svg）
所以，為了渲染那個dom節點，你需要采取以下步驟：

遞歸 clone 原始的 dom 節點

獲取 節點以及子節點 上的 computed style，并將這些樣式添加進新建的style標簽中（不要忘記了clone 偽元素的樣式）

嵌入網頁字體

找到所有的@font-face

解析URL資源，并下載對應的資源

base64編碼和內聯資源 作為 data: URLS引用

把上面處理完的css rules全部都放進