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

Question

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

Answer 1

听起来你好像遇到了一个跨地域的问题。

有关示例https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image，请参阅

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