When there is a large DOM content, empty file download happening. Are there any limitations?

[santhosh-j]

When there is a large DOM content, empty file download happening. Are there any limitations?

I am using Angular and high charts. I tried with DOM containing 200+ highchart images and static svg files. When tried to download the dom as JPEG, it is giving empty images as result.
Is there any limitation for this package?
stackblitz code
https://stackblitz.com/edit/angular-12-highcharts-e132vd

Expected behavior

Download whole dom as image

Actual behavior

Downloading empty Image as 0B size

Library version

https://www.npmjs.com/package/dom-to-image/v/2.6.0

Browsers

• Chrome 118
• Firefox 119

[richex-cn]

Looks like a cross-domain problem, See https://stackoverflow.com/a/49994161

[santhosh-j]

Looks like a cross-domain problem, See https://stackoverflow.com/a/49994161

This will not be an issue since in the same code, if you reduce the totalNumberOfCharts value from 200 to 100, the image will download properly. When the DOM size increases, download not happening.

[richex-cn]

I tried to display canvas on the page, and it looked like this:

And canvas size is 790x74606, This seems to be related to low memory, I'm not familiar with Angular, so maybe you could try remerging by batch rendering?