无法在“HTMLCanvasElement”上执行“toBlob”：受污染的画布可能无法在 react-image-crop 中导出答案

【问题标题】：Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported in react-image-crop无法在“HTMLCanvasElement”上执行“toBlob”：受污染的画布可能无法在 react-image-crop 中导出
【发布时间】：2020-12-30 06:37:56
【问题描述】：

我正在使用 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.

【问题讨论】：

解决了您的问题？

标签： javascript reactjs npm react-image-crop

【解决方案1】：

听起来您好像遇到了跨域问题。

参见例如https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

一旦您在画布中绘制任何从其中加载的数据未经 CORS 批准的另一个来源，画布会被污染。一种受污染的画布不再被认为是安全的，并且任何尝试从画布中检索图像数据将导致抛出异常。

【讨论】：