1

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

1 回答 1

1

It sounds as though you are coming across a cross-origin problem.

See for example https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

于 2020-12-30T10:10:49.460 回答