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

[Patrick Schadler]

After creating a QR Code, which is displayed and working properly, I get following error in the browser console:

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

I am using the following code to generate the qr code:

    if (this.qrcode) {
      this.qrcode.clear();
    }

    this.qrcode = new QRCode(document.getElementById('qrcode'), {
      logo: logoLink,
      text: link,
      width: 256,
      height: 256,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H,
      logoWidth: undefined,
      logoHeight: undefined,
      logoBackgroundColor: '#ffffff',
      logoBackgroundTransparent: false,
    });

Any ideas on fixing this issue?

[Patrick Schadler]

I fixed it by using the EasyQrCodeJS package, which relies on this one. There is an option to pass the crossOrigin property with "anonymous". Eventually you have to allow your domains in your backend. In my case I have to set the values in the core.json file add google cloud console for my domains where I want to retrieve the images to the canvas got no longer tainted.