dataurl is empty for large dom element

[gamenic-arim]

const imageElement = document.getElementById( "image-container-id" );

const dataUrl = domtoimage.toPng(imageElement); console.log(dataUrl); // got response -> data: ;

when the dom element is usually large data URL response is empty

[arlendp]

cause domtoimage.toPng return a promise, try domtoimage.toPng(imageElement).then(dataUrl => { console.log(dataUrl)} );

[jetrotal]

Hi @arlendp I'm having the same issue.

To reproduce it:

I first Go to https://jetrotal.github.io/EasyChar/

then open console, and clean up the div, using DOMPurify:

document.getElementById('charContainer').innerHTML = DOMPurify.sanitize(document.getElementById('charOutput'), 
{ USE_PROFILES: { html: true } });

then, run the toPng function:

var node = document.getElementById('charOutput');

domtoimage.toPng(node).then(function (dataUrl) {

        var img = new Image();
        img.src = dataUrl;
        document.getElementById('header').appendChild(img);
        
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

The result is a broken image with data: ; as its URL