html2canvas 原理,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方式，但是注意要对文本进行限流！

原文：https://www.cnblogs.com/amiezhang/p/10977477.html