html2canvas原理

html2canvas有2種模式，一種是利用foreignObject，一種是純canvas繪製

1.foreignObject到canvas

步驟：

　　1.把要截圖的dom克隆一份，過程當中把getComputedStyle附上style

　　2.放到svg的foreignObject中

　　3.把svg序列化成img的src（SVG直接內聯）：

img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));

　　4.ctx.drawImage(img, ....)

2.純canvas

步驟：

　　1.把要截圖的dom克隆一份，過程當中把getComputedStyle附上style

　　2.把克隆的dom轉成相似VirtualDom的對象

　　3.遞歸這個對象，根據父子關係、層疊關係來計算出一個renderQueue

　　4.每一個renderQueue Item都是一個虛擬dom對象，根據以前getComputedStyle獲得的style信息，調用ctx的各類方法

 

總結：

　　性能：若是文本多，節點少，svg foreignObject的方式每每性能更高；文本少，節點多的時候，canvas反而性能更高

　　準確性：純canvas方式每每更準確的還原dom的表現；svg foreignObject在比較複雜的狀況下會出現截圖不許確的問題

綜上所述，建議使用純canvas方式，可是注意要對文本進行限流！

 

相似的庫：rasterizeHTML

參考文章：https://juejin.im/entry/58b91491570c35006c4f7fdf