On firefox toPng returns empty image

[Thoronir42]

I've created a simple background markup and insert tool for images with transparency: HTML repro. This HTML file contains barebones for the background creation and dom-to-image-calling in a native code.

I might try to investigate the library inner workings later but as of now I can only provide this hopefully precise report.

Repro steps

1. (have a HTML markup with some SVGs and CSS styling in an element matching .frame selector)
2. execute domtoimage.toPng(el) and save it by clicking an anchor tag with download attribute:

function saveFile(dataUrl, filename) {
    const a = document.createElement("a")
    a.download = filename
    a.href = dataUrl
    a.click()
}
async function saveImg(el) {
    const img = await domtoimage.toPng(el)
    saveFile(img, "fancy-portrait.png")
}
saveImg(document.querySelector('.frame'))

3. open saved image

Expected behavior

The resulting image should:

• have 500px*500px
• contain the DOM markup

Actual behavior (stack traces, console logs etc)

• ✅ have 500px*500px
• ❌ is all transparent

The console is empty and it seems like the library "finishes" successfully and just... skips some steps?

Library version

[email protected] using https://cdn.jsdelivr.net/npm/[email protected]/dist/dom-to-image-more.min.js

Browsers

• Chrome/114.0.0.0 : works fine
• Firefox 114.0.2 (64-bit) : produces empty image

[Durss]

This is apparently due to a super old issue on Firefox.
https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage

TLDR: you need to specify a fixed width and height to make it work.

domtoimage.toPng(node, {width:600, height:200} );