1

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.
Pranay kumar
  • 1,983
  • 4
  • 22
  • 51

1 Answers1

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.

A Haworth
  • 30,908
  • 4
  • 11
  • 14