The performance problem with cloning document contains a lot of SVG nodes

ybaturin commented 3 years ago

[o] You are using the latest version
[o] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

If a page contains a log of SVG nodes, e.g. amCharts (based on SVG), the call html2canvas(pageNode) freezes Firefox & Safari for a while. It could take several minutes. Just compare:

Render a big SVG chart takes ~ 15 seconds on my PC (https://jsfiddle.net/yaznayka/5axe04vt/33)
The same chart with turned "copyCssStyles" off (https://i.imgur.com/vDUhd3O.png) ~ 1 second (https://jsfiddle.net/yaznayka/5axe04vt/35)

Suggestion

Add an option in html2canvas to turn off copyCssStyles in SVG nodes.

Specifications:

html2canvas version tested with: 1.0.0-rc.7
Browser & version: Chrome Version 89.0.4389.90 (Official Build)
Operating system: Linux mint

steven-wilson-crl commented 3 years ago

I have this same issue (of an SVG heavy chart taking 30+ seconds to render all while hanging the entire web site in safari), so... +1 on this being needed!

Finesse commented 2 years ago

Cloning the whole page to take a screenshot of a small part is an overkill IMHO. I'm wondering whether there is a way to not clone the whole page.

BlueLamantine commented 2 years ago

@niklasvh It makes sense. Please, pay attention to this

niklasvh / html2canvas