将画布转换为 blob 时的 react-crop-image 错误

问题描述

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

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

这是我关注的内容：

我用这段代码来裁剪图像并在画布中绘制它。

<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 相关。无论如何我可以裁剪我的图像而不用画布绘制它吗？或任何裁剪图像的方法或任何解决方案？

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

解决方法

我已经解决了这个问题。我只是从反应作物标签中匿名。

这是解决方案代码：

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