tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.21k stars 1.68k forks source link

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

Open santhosh-j opened 8 months ago

santhosh-j commented 8 months ago

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

richex-cn commented 8 months ago

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

image

santhosh-j commented 8 months ago

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

image

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 commented 8 months ago

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

image

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?