标签:注意 svg class git XML 方式 问题 一个 使用
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
标签:注意 svg class git XML 方式 问题 一个 使用
原文地址:https://www.cnblogs.com/amiezhang/p/10977477.html