Load remote images CORS about dom-to-image-more HOT 9 CLOSED

I am facing the exactly same problem right now.
@mask2012 @dkruchok did you solved this, guys?

from dom-to-image-more.

This is a significant issue. There is no need to access the data source within the DOM again. However, you can resolve this issue by using a third-party URL or by setting up your own API server.

Solution

While there is no guaranteed solution, the problem can be resolved by using allOrigins. With allOrigins, you can bypass CORS policies and access the base64 version of the image, allowing the image in the DOM tree to be displayed.

Using allOrigins is simple (fetch or axios doesn't matter):
const base64 = await axios.get(https://api.allorigins.win/get?url=${yourImageURL})

Sample Repository

from dom-to-image-more.

That's a really interesting solution, might be able to add an option to pipe all image requests through that automatically (opt-in). Will look into that idea after I do my taxes :)

from dom-to-image-more.

I have the same problem, and what even funny is, the same url, my computer always works fine, and other's always CORS.
Anyone have clue with this?

from dom-to-image-more.

the first pic is the wrong one, and the second is on my computer, which is always fine.

from dom-to-image-more.

I have the same problem, has anyone found a solution? Should I implement a proxy server and put requests through it?

from dom-to-image-more.

Try cacheBust: true

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

from dom-to-image-more.

Try cacheBust: true

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

Don't work in all cases

from dom-to-image-more.

That's a really interesting solution, might be able to add an option to pipe all image requests through that automatically (opt-in). Will look into that idea after I do my taxes :)

Actually considered the same solution until I noticed the delay caused by image loading :) Therefore, using a third-party URL and rendering all images may not be efficient. In fact, frameworks with server-side functions like Next.js make it quite easy and eliminate the need for this.

It seems like many people are encountering the same issue. With your permission, I would like to add a comment about this topic in the readme file.

from dom-to-image-more.