html2canvas principle

html2canvas has two modes, one is to use foreignObject a pure drawing canvas

1.foreignObject to canvas

step:

　　1. To clone a screenshot dom, during the attach style getComputedStyle

　　2. svg placed in the foreignObject

　　3. The svg sequence into the img src (SVG inline direct):

img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));

　　4.ctx.drawImage(img, ....)

2. Pure canvas

step:

　　1. To clone a screenshot dom, during the attach style getComputedStyle

　　2. cloned dom converted into objects of similar VirtualDom

　　3. recursive object, is calculated according to parent-child relationship, a superposed relationship renderQueue

　　4. Each renderQueue Item dom is a virtual object according to the previous style information getComputedStyle obtained invoke the methods of ctx

 

Similar library: rasterizeHTML

Reference article: https://juejin.im/entry/58b91491570c35006c4f7fdf