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

Question

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 the whole dom as image

Actual behavior

Downloading the empty Image as 0B size

Library version

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

Browsers

• Chrome 118
• Firefox 119

Answer 1

Yes there are limitations. dom-to-image is generating an image from a DOM node using HTML5 canvas. The problem is the canvas element. It has its limitations and they are explained here and the tests they did are these.

https://github.com/jhildenbiddle/canvas-size#desktop

It also started to crash in my tests using your example for totalNumberOfCharts = 70; This generated a resolution of 599x26264 which is exceeding the Max Area (Total) calculated for canvas.