一、HTML 轉圖片
目前，常見的開源的能夠將 HTML 轉換為圖片有html2canvas、dom-to-image，大部分場景下，這些開源庫都能很友好的處理。
HTML 轉圖片的實現原理，通常分為兩種：svg 與 canvas。今天主要討論下 svg 的場景，它的處理流程一般為：
二、svg 模式存在的問題
普通的 DOM 節點這么處理，一般沒啥大問題。唯獨遇見 Web Component 時，XMLSerializer 的處理過程會造成 ShadowRoot 解析失敗。
表現的行為就是，繪制出的圖片中，Web Component 所在的位置是一片空白。
三、解決方案設計
XMLSerializer.serializeToString 對 Web Component：
- 如果 Web Component 的關鍵內容位于其 Shadow DOM 中，那么使用 XMLSerializer 序列化后，這些內容將不會包含在生成的 XML 字符串中，導致信息丟失
- 如果 Web Component 的樣式信息位于 Shadow DOM 中，使用 XMLSerializer 序列化后，樣式信息也將丟失，導致外部無法正確地應用樣式
定位到問題后，則大致的處理方案為：
- 將 Web Component 解析為普通的 DOM 節點，將 ShadowRoot 下的節點拷貝至 DOM 節點中
- 處理 ShadowRoot 的 style 節點，防止樣式造成全局污染
四、方案實現
npm - @gripeless/pico 是一個基于 svg 實現的、輕量級的 HTML 轉圖片的庫，大小 99.3 KB
@swl/clone-node-deep 是一個兼容 Web Component 拷貝的開源庫，大小為 10.6KB
二者相配合，即可實現兼容 Web Component 的圖片繪制場景。
五、引用
- github - pico 源碼
- github - @swl/clone-node-deep 源碼
)
