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.
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'
/>