Uncaught (in promise) error { target: img, isTrusted: true, srcElement: img, … }

[patatetom]

Expected Behavior

download png image of provided element (body)

Current Behavior

I get this error but can't get more details from the developer console :

Uncaught (in promise) 
error { target: img, isTrusted: true, srcElement: img, eventPhase: 0, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, timeStamp: 5207770, … }

Steps To Reproduce

here is what is done :

• html-to-image.js (1.11.11) is retrieved from https://cdnjs.com/libraries/html-to-image
• its contents is copied and pasted into the Firefox browser's developer console (console returns true without any error)
• (according to the advanced examples) this piece of code is then played in the developer console

htmlToImage.toPng(document.body).then(function(dataUrl) {
	var link = document.createElement('a');
	link.download = 'test';
	link.href = dataUrl;
	link.click();
});

Your Environment

• html-to-image: 1.11.11
• OS: ArchLinux
• Browser: Firefox 127.0

[biiibooo[bot]]

👋 @patatetom

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[asimdahall]

I am facing the same issue right now

I cannot even know whats the error

[ForeverSun]

[hungtcs]

The same issues. I found that when I take a screenshot, it automatically downloads the favicon, but in the development environment the favicon does not exist and the server returns a 404 error, but if it is in the product environment, there is no error.

[ghost]

Same error here using firefox. When using Edge the image gets downloaded with no issues.

[Too-ln]

使用 Firefox 时出现同样的错误。使用 Edge 时，图像下载没有问题。

[Rojoniaina]

Hello, is there anything new on this issue?

[vaban-ru]

Any news?

[abuldevx]

Hello, is there anything new on this issue?

[patatetom]

hi, for the moment, I've switched to html2canvas.

[uchamb]

I have the same issue. Looks like this happens when it's trying to download external images. It works fine with local images. Implementing local proxy, which will be running on the same protocol as your web app will solve this problem. But also image URLs should be replaced with Proxy urls. As I remember html2canvas supports proxy but I can't find anything similar for this package. But we can create it ourselves.

Quick solution: If you own the server where your images are served, add CORS headers to allow your domain. I added this config to my s3 bucket and it solved my problem:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://yourdomain.com"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

[leCheveuCodeur]

I think it's due to the size of the image generated, because the image attached to the error is 32mo on my side, whereas it's specified in the doc that there may be problems if the DOM is huge. [Rendering will failed on huge DOM due to the dataURI limit varies.](https://github.com/bubkoo/html-to-image?tab=readme-ov-file#things-to-watch-out-for) https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations/41755526#41755526

[Stanley-Jovel]

Any updates on this?

[fzn0x]

Found solution that works fine on my end, but it's pain to compress any assets inside the canvas one by one, anyone could improve this solution anyway

https://gist.github.com/fzn0x/d41864e95c7412087b859139ef49aa1b

cc @Stanley-Jovel

Thanks @leCheveuCodeur

basically you need to keep your canvas size as small as possible

[Stanley-Jovel]

Thanks @fzn0x

What fixed the issue for me was that, when dealing with images hosted in s3, you should invalidate the cache for the requested image, like so:

toPng(ref.current, {
    fetchRequestInit: {
        method: 'GET',
        cache: 'no-cache'   // <-- Important!
    }
})

For anybody else dealing with this problem, try this before attempting something more sophisticated.

[wafaa-ismail]

Any updates on this?

[small-vagetable]

我认为这是由于生成的图像的大小造成的，因为错误中附带的图像在我这边是 32mo，而文档中指出如果 DOM 很大，可能会出现问题。 [由于 dataURI限制不同， 渲染会在巨大的 DOM 上失败。]( https://github.com/bubkoo/html-to-image?tab=readme-ov-file#things-to-watch-out-for ) https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations/41755526#41755526

@leCheveuCodeur I'm thinking the same as you, because the image that came with me is 38MB. How did you solve it?

[Adebesin-Cell]

Hi 👋, is there any update on this issue?

[scristian9]

This issue persists on Firefox

[citrusjunoss]

Can it be solved?

[daviseford]

I had to remove any next.js <Image /> components to ensure a successful operation.