无法在“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 批准的来源，画布会被污染。一种 受污染的画布不再被认为是安全的，并且任何 尝试从画布取回图像数据将导致 要抛出的异常。