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

[constantintaivan]

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:

• html2canvas version tested with:
  1.0.0-alpha.12 (non-minified version, downloaded from https://html2canvas.hertzen.com/) which was loaded by using: root["html2canvas"] = factory(); scale:2, jpeg rendering
• Browser & version:
  Version 70.0.3538.102, 64 bits
• Operating system:
  Windows 10 Home, Version: 10.0.17134 Build 17134

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]

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

[vinodkrishnamps]

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

[constantintaivan]

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