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