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