html2canvas原理

概述html2canvas有2种模式，一种是利用foreignObject，一种是纯canvas绘制 1.foreignObject到canvas 步骤： 　　1.把要截图的dom克隆一份，过程中把getComputedStyle附上style 　　2.放到svg的foreignObject中 　　3.把svg序列化成img的src（SVG直接内联）： img.src = "data:image/sv

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

总结

以上是内存溢出为你收集整理的html2canvas原理全部内容，希望文章能够帮你解决html2canvas原理所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。