Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
DonkeyKongJr opened this issue Dec 28, 2020 · 1 comment

Comments

@DonkeyKongJr
Copy link

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?

@DonkeyKongJr
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant