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

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

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

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

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

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

嵌入網(wǎng)頁(yè)字體

找到所有的@font-face

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

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

把上面處理完的css rules全部都放進(jìn)