如何解决将画布转换为 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'
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。