0

i want to convert my cropped canvas to file,this is my code in order to do that:

 const canvas = previewCanvasRef.current;
 canvas?.toBlob((blob) => {
     const file = new File([blob], 'fileName.jpg', { type: 'image/jpeg' });
 }

but when i try to do that i get this error message:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

i've done some reasearch and find out the root of problem is img cross origin, since i get img data from url, so i changed it to

<img crossorigin="anonymous" />

but after that, i get different error message that is:

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

what can i do in order to solve this problem?

Maziyar parsi
  • 11
  • 1
  • 4
  • Either don't draw that image on the canvas, or make the server that offers it add the respective headers as the error message says, or create a http proxy to serve the image from your own domain. – Bergi Jan 02 '23 at 06:32
  • Can you show the actual HTML code? – Charles Han Jan 02 '23 at 06:36
  • i have to draw image to that canvas. how can i add respective headers in img component? as far as i know, you cant do that – Maziyar parsi Jan 02 '23 at 06:36
  • im sure this code works, becuase when i loaded image from public folder everything is fine., but when i do that from server, it gave me these errors – Maziyar parsi Jan 02 '23 at 06:37
  • "*how can i add respective headers in img component?*" - I told you to make **the server** that serves the image add them. Not the component. – Bergi Jan 02 '23 at 06:39
  • i already talked to backend developer for this project, he said he cant do that for security reason – Maziyar parsi Jan 02 '23 at 06:41
  • 1
    If the backend developer won't let you display the image, you cannot use it. Sounds like conflicting requirements. Talk to your manager/project lead to get this resolved. (Hint at the backend developer being wrong, if both of you are working on the same project, it is *not* a security issue) – Bergi Jan 02 '23 at 06:48

0 Answers0