将 canvas 转换为 blob 时出现 react-crop-image 错误

Question

我想在我的站点中创建一个关于裁剪文章图像的模块。我正在使用 react-crop-image.

我在将 canvas 转换为 blob 时遇到问题。我得到一个错误 SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported. 如果有建议，我想找到另一种裁剪图像的解决方案或方法。

这是我关注的内容：

我有此代码用于裁剪图像并在 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>

现在，我想将其转换为 blob 并转换为 api 服务器中的 POST，我创建了一个按钮来提交文章并有一个此函数的事件，我的错误就在那里发生：

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

我正在搜索错误，它与 CORS 有关。无论如何我可以裁剪我的图像而不用 canvas 绘制它？或任何裁剪图像的方法或任何解决方案？

我真的不知道这个错误。因此非常感谢任何能实现我裁剪图像目标的建议。

Answer 1

我已经解决了问题。我只是从 react crop 标签中输入匿名。

这里是解决代码：

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

将 canvas 转换为 blob 时出现 react-crop-image 错误

react-crop-image error in converting canvas to blob

javascript

reactjs

react-image-crop