html2canvas原理

Posted 2021-12-20 amiezhang

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