Error cors

[gutofurlan]

Hi guys

I'm trying to generate the image of a tage img from my screen, but I'm having color problems, does anyone have any suggestions? note: The error only occurs in chrome, when using in firefox this error does not occur...

`var node = document.getElementById(id_div_item);

return domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        return img.src;
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });`

[MSCAU]

What is the error and what are the color problems?

[gutofurlan]

What is the error and what are the color problems?

Hi this problem

[thomas-void0]

I suggest you use html2canvas. for dom-to-image, just a little error. the page cannot be exported and the lib is no person maintained

[mohammad-matini]

@gutofurlan It is possible that you are facing an instance of the CORS headers caching issue fixed by https://github.com/tsayen/dom-to-image/pull/129.This issue affects browsers based on the Chromium engine, like Chrome, but not Firefox. Can you please try to use cacheBust and report back. It can be enabled like this:

domtoimage.toPng(node, { cacheBust: true }) 

[JacksonBowe]

@mohammad-matini This fixed my issue. Love you. I don't know what cacheBust does and I probably never will. <3

[BrunoQuaresma]

This issue still happening for me even using cacheBust 😢

[5v3n-08]

For me also with cacheBust...

[zfogg]

this is funky.. i think cacheBust is working for me but idk why.. i'll fork this and fix it if i need to!

[Cyril-AL]

Has the problem been solved？

[5v3n-08]

It still does not work for me...

[nonoumasy]

doesn't work for me. still getting CORS issue when using cachebust option

[mohammad-matini]

Just to clarify: If you are having CORS issues, then it is most likely that cacheBust will not help you. The cacheBust option does NOT fix CORS issues; it fixes issues related to Chromium browser caching of CORS headers (try it on Firefox: if the same errors appear on Firefox too, then cacheBust will 100% not help you!).

There are many reasons why a CORS error might be happening, most of them do not have anything to do with dom-to-image. Please take a look at Mozilla's guide for debugging CORS errors and determine the exact reason why the CORS error is happening. If you think it is an issue with the caching of CORS-related headers, and dom-to-image not busting the cache correctly, then please open a new issue to discuss that.

If the CORS errors are happening when dealing with 3rd party websites (Pinterest, Wikipedia, etc.), then there's nothing that dom-to-image can do about that at all. The 3rd party websites are basically instructing the browser to refuse the requests. Basically, you will need to download the resources on a client that will ignore the CORS headers; you will need to deploy a proxy server, or process the resources in a back-end service controlled by you, instead of in the browser.

If the CORS errors are happening when using signed requests with an S3 bucket (or any service that refuses random query parameters appended to the requests), then please take a look at issue https://github.com/tsayen/dom-to-image/issues/412 and the patch to fix it at https://github.com/mohammad-matini/dom-to-image/commit/cce60295f88ef7d192bbf72b70d9a4fbbe867f47

[best2jin]

I also had the same symptoms, so I handled it by avoiding CORS. When calling the src address in the img tag from javascript, it was blocked by CORS. I parsed the HTML before viewing it. I extracted only the img tags from the HTML and got the address corresponding to the src. I downloaded the image using something like WebClient with the obtained address, and then encoded it in base64. After setting the base64 to the src in the img tag, I displayed the HTML on the screen. This way, even if I use dom-to-image, I was able to avoid it because it is not accessing via http or https addresses. I hope this helps.