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的各种方法

类似的库：rasterizeHTML

参考文章：https://juejin.im/entry/58b91491570c35006c4f7fdf