2

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

我在将画布转换为 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>

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

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

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

我真的对错误一无所知。因此，非常感谢任何只是为了实现我的裁剪图像目标的建议。

4

1 回答 1

0

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

这是解决方案代码：

<ReactCrop
src={state.featureImagePreview}
onImageLoaded={onLoad}
crop={cropImage}
onChange={                                        
(c) => setImageCrop(c)
}                                      
onComplete={(c) => setCompletedCrop(c)}
crossorigin='anonymous'                                                                            
/>
于 2021-05-17T03:26:33.773 回答