React use-screen-shot unable to take a screenshot of an Image

Question

I am using use-screen-shot to take screenshot in React. Everything is working fine but the only thing missing is the image. Now if image's source is local, I can take screenshot of it. But if it's url, it shows a white space.

I can't seem to make it work. Any idea ?

Answer 1

To load image data into JavaScript (which is required by useScreenShot) you need to have permission to do so.

For local images, that is automatic. For crossorigin images you need to:

• Add the crossorigin attribute to request permission via CORS (e.g. <img src="http://placekitten.com/100/100" alt="" crossOrigin="anonymous" />)
• Have the server use CORS response headers to grant you permission to read it

You can't load image data across origins without permission from the source of the image. The usual alternatives to CORS (as per the answer in the previous link), such as using a proxy, apply.