Search code examples
angularhtml5-canvasfabricjs

Error: 'HTMLCanvasElement': Tainted canvases may not be exported

I added image to my canvas. After doing this when I try to export the whole canvas to PNG file, this error occures: 'HTMLCanvasElement': Tainted canvases may not be exported.

I tried fix this with crossorigin as suggested on stackoverflow but it didn't work.

Here is my code: https://stackblitz.com/edit/angular-pggk9r?file=src%2Fmain.ts

If you just click "download", everything works fine. But if you click "change" to change the background of the canvas, and then "download", the error happens.

After reviewing answers on stackoverflow and github, I tried to use crossOrigin: 'anonymous' but it didn't work. My browser is Chrome.

Solution

  • This is what worked for me (the answer is inspired by another answer from Why does canvas.toDataURL() throw a security exception?):

    let c = document.createElement('img');
let i = new fabric.Image(this.c);

c.onload = () => {
  i = new fabric.Image(this.c);
  this.canvas.add(i);
  c = c.onload = null;
};
c.setAttribute('crossOrigin', 'anonymous');
c.src = "<any external url>";