Confirmed it doesn't work on Safari

[jonrrivera]

So dom-to-image-more doesnt work on safari? bummer :/

[IDisposable]

What's the actual error @jonrrivera ?

[IDisposable]

Can you verify that v3.4.2 does not work under version Safari 15.4 ?

[djrees]

It doesn't produce an error, but it does cut off the image when download.

Original element to capture:

Dom-to-image-more output:

It has a transparent background, but the image is incorrectly cropped. The original element was 400px by 400px. It happens on both desktop and mobile.

Code used:

let node = 'test';
let file = 'download';
function download(node, file) {
    domtoimage
        .toPng(document.getElementById(node))
        .then(function(dataUrl){
            var link = document.createElement('a');
            link.download = file+".png";
            link.href = dataUrl;
            link.click();
        })
}

<div id="test" style="background: linear-gradient(0, red 0%, blue 100%); width: 400px; height: 400px; display: flex; align-items: center; justify-content: center;">
    <p style="color: white; margin: 0">Hello</p>
</div>

[djrees]

Follow up: Using Josh961's comment on this Firefox issue, setting the height and width seems to work well.

Solution:

function download(node, file) {
    let element = document.getElementById(node);
    domtoimage
        .toPng(element, {
            width: element.offsetWidth,
            height: element.offsetHeight
        })
        .then(function(dataUrl){
            var link = document.createElement('a');
            link.download = file+".png";
            link.href = dataUrl;
            link.click();
        })
}

New output:

Hope this helps! 😊