javascriptreactjsreact-image-crop

react-crop-image error in converting canvas to blob


I would like to create a module in my site about cropping the image of an article. I am using the react-crop-image.

I am having a problem on converting my canvas to blob. I am getting an error of SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported. I would like to find another solution or way to crop an image if there would be suggestion.

Here is what I'm following:

I have this code in react to crop the image and draw it in canvas.

<ReactCrop
src={state.featureImagePreview}
onImageLoaded={onLoad}
crop={cropImage}
onChange={
  (c) => setImageCrop(c)
}
onComplete={(c) => setCompletedCrop(c)}
/>
<div>                                    
<canvas
  ref={previewCanvasRef}
  style={{
    width: Math.round(completedCrop?.width ?? 0),
    height: Math.round(completedCrop?.height ?? 0)
    // display: "none"
  }}
/>                                    
</div>

Now, I would like to convert this to blob and to POST in api server, I created a button to submit the article and has an event of this function and there where my error occurs:

 const handleSave = (params) => {        
    previewCanvasRef.current.toBlob(
      (blob) => {
        const previewUrl = window.URL.createObjectURL(blob);    
      },
      {useCORS: true},
       'image/wbmp');
}

I was searching about the error and it relates about the CORS. Is there anyway I can crop my image without drawing it with canvas? or any method to crop the image or any solution ?

I was really don't have any idea about the error. so any suggestions just to achieve my goal in cropping the image is very well appreciated.


Solution

  • I have already solved the problem. I just put anonymous from the react crop tag.

    Here is the solution code :

    <ReactCrop
    src={state.featureImagePreview}
    onImageLoaded={onLoad}
    crop={cropImage}
    onChange={                                        
    (c) => setImageCrop(c)
    }                                      
    onComplete={(c) => setCompletedCrop(c)}
    crossorigin='anonymous'                                                                            
    />