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

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

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

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

遞歸 clone 原始的 dom 節(jié)點

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

嵌入網(wǎng)頁字體

找到所有的@font-face

解析URL資源，并下載對應(yīng)的資源

base64編碼和內(nèi)聯(lián)資源 作為 data: URLS引用

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