0

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 ?

İlker
  • 1,872
  • 1
  • 12
  • 28

2 Answers2

0

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • crossOrigin="anonymous" making me unable to load the image because of CORS policy. Should this be handled in server side? – İlker Apr 01 '22 at 08:43
  • @İlker — You need to do **both** things I mentioned in bullet points. The HTML needs the crossorigin attribute. The server needs to grant permission. It is not one-or-the-other. You need both. – Quentin Apr 01 '22 at 08:51
  • https://codesandbox.io/s/w0kpjh?file=/src/components/Image.js can you try this one? it doesn't seem to work – İlker Apr 01 '22 at 12:38
0

you can convert the image into base64 format and it'll work bro. instead of setting src="https://" you can just use the base64 format.

kaungmyathan
  • 11
  • 1
  • 2
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 22 '23 at 09:18