如何解决无法在“HTMLCanvasElement”上执行“toBlob”:受污染的画布可能无法在 react-image-crop 中导出
我正在使用 react-image-crop npm 模块来裁剪图像。当我将系统图像作为道具传递给它时,它工作正常,但是当我传递来自后端的图像的 URL 时,此模块显示错误。
“无法在‘HTMLCanvasElement’上执行‘toBlob’:可能无法导出受污染的画布。”
<ReactCrop
src={src} //src values coming from database which is basically an image url
crop={crop}
ruleOfThirds
onImageLoaded={this.onImageLoaded}
onComplete={this.onCropComplete}
onChange={this.onCropChange}
className=""
/>
please suggest how can I overcome this error.
解决方法
听起来好像您遇到了跨域问题。
参见示例 https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
只要您在画布上绘制任何从其中加载的数据 另一个未经 CORS 批准的来源,画布会被污染。一种 受污染的画布不再被认为是安全的,并且任何 尝试从画布取回图像数据将导致 要抛出的异常。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。