search

niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.7k stars 4.82k forks source link

Snapshot creation takes too much time if employed in loop for multiple div elements #1707

Open constantintaivan opened 6 years ago

constantintaivan commented 6 years ago

Hello,

When using the latest release of html2canvas I get a time increase in computing the snapshots. I use this library to capture individual divs which renders various charts such pies and bars. Our statistics page could have many of them, at least 5. Then, the captured images are stored within a pdf file (handling page break) and for this reason I could not employ the approach to capture the entire parent div for all charts.

In particular, I'm also interested if the lack of target-densitydpi make it slowly and how to avoid it. Previously, we were using html2canvas 0.4.1 but the image resolution was low causing a blurred effect. This issue is a follow up on this one: #1087

Specifications:

Thank you! Regards, Constantin

Chrome console logs: 0ms html2canvas: html2canvas 1.0.0-alpha.12 The key "target-densitydpi" is not supported. 2930ms html2canvas (16731e24dd0): Document cloned, using computed rendering 2930ms html2canvas (16731e24dd0): Starting node parsing 2933ms html2canvas (16731e24dd0): Finished parsing node tree 2933ms html2canvas (16731e24dd0): Finished loading 0 images [] 2933ms html2canvas (16731e24dd0): Starting renderer 2935ms html2canvas (16731e24dd0): Canvas renderer initialized (28x131 at 0,0) with scale 2 2935ms html2canvas (16731e24dd0): Render completed 3110ms html2canvas: Document cloned, using computed rendering 3110ms html2canvas: Starting node parsing 3119ms html2canvas: Finished parsing node tree 3120ms html2canvas: Finished loading 1 images [canvas] 3121ms html2canvas: Starting renderer 3121ms html2canvas: Canvas renderer initialized (745x191 at 229.800...) with scale 2 3128ms html2canvas: Render completed 0ms html2canvas: html2canvas 1.0.0-alpha.12 _The key "target-densitydpi" is not supported._ 3008ms html2canvas (1673207ba3e): Document cloned, using computed rendering 3009ms html2canvas (1673207ba3e): Starting node parsing 3011ms html2canvas (1673207ba3e): Finished parsing node tree 3012ms html2canvas (1673207ba3e): Finished loading 0 images [] 3012ms html2canvas (1673207ba3e): Starting renderer 3013ms html2canvas (1673207ba3e): Canvas renderer initialized (28x131 at 0,0) with scale 2 3015ms html2canvas (1673207ba3e): Render completed 3526ms html2canvas: Document cloned, using computed rendering 3527ms html2canvas: Starting node parsing 3540ms html2canvas: Finished parsing node tree 3541ms html2canvas: Finished loading 3 images (3) [canvas#surveyResultCanvas_1_1, canvas, canvas] 3541ms html2canvas: Starting renderer 3542ms html2canvas: Canvas renderer initialized (745x344 at 229.80...) with scale 2 3553ms html2canvas: Render completed

ikumaran commented 5 years ago

I also have same problem - and in IE11 - its even worse for me.

vinodkrishnamps commented 5 years ago

Please let me know if you have any solution. I have multiple page PDF Creation and it is taking approx 2.30 mins.

constantintaivan commented 5 years ago

Yes, I solved this issue by using https://www.highcharts.com for building SVG charts. Then I used the tools they are using for exporting: YWorks JSPDF fork and svg2pdf. Now it works faster than above measures and I'm adding various charts to the same PDF. So, I have PDFs with nice SVG charts instead of embedding images - which may not provide the best resolution.

https://www.highcharts.com/docs/export-module/client-side-export