CODEWITHSUNDEEP
javascriptreactjsnpmreact-image-crop
Pranay kumar
Pranay kumar

Reputation: 2197

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported in react-image-crop

I am using the react-image-crop npm module for cropping of images. It is working fine when I passed my system image as props to it but when I passed an URL of the image coming from the back-end then this module shows an error.

"Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported."

          <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.

Upvotes: 1

Views: 2276

Answers (1)

A Haworth
A Haworth

Reputation: 36522

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.

Upvotes: 1

Related Questions