码迷,mamicode.com
首页 > Web开发 > 详细

html2canvas原理

时间:2019-06-05 09:16:40      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:注意   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

 

html2canvas原理

标签:注意   svg   class   git   XML   方式   问题   一个   使用   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!