1

I have an image stored in firebase storage. I load the image on a canvas to draw on. It loads fine and I can draw on it fine. However, when I go to export it I receive the following error:

ERROR DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Here's the code in my export to test with:

  exportImage() {

     let canvas = document.getElementById('baseLayer_myCanvas') as HTMLCanvasElement;

     var image = new Image();

     image.setAttribute('crossOrigin', 'anonymous');

     image.id = "pic"

     image.src = canvas.toDataURL('image/png');

     document.getElementById('image_for_crop').appendChild(image);

 );

}
KENdi
  • 7,576
  • 2
  • 16
  • 31

1 Answers1

0

Turns out I needed to allow cross-origin on Firebase. A detailed explanation can be found at the link below.

https://groups.google.com/forum/#!msg/firebase-talk/oSPWMS7MSNA/RnvU6aqtFwAJ