search

scholtz / qrcode-vue3

MIT License
87 stars 33 forks source link

Failed to generate the qrcode when the image props passes to the component comes from a file server. #12

Closed jordyparker closed 2 years ago

jordyparker commented 2 years ago

Hi @scholtz I have been using your package for a while and I thank you for the great work. I have an error when generating the Qr Code because the image I pass to the QRCodeVue3 component is a url of my image that is stored in a public folder on cloudinary. The other times it worked because the image was from my local drive.

Here is the error log displayed in my console:

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Proxy.eval (webpack-internal:///./node_modules/qrcode-vue3/lib/index.js:1:43021) at eval (webpack-internal:///./node_modules/qrcode-vue3/lib/index.js:1:42730) at Object.eval [as next] (webpack-internal:///./node_modules/qrcode-vue3/lib/index.js:1:42835) at a (webpack-internal:///./node_modules/qrcode-vue3/lib/index.js:1:43122)

I did some research and found that the error can be solved by adding crossOrigin="anonymous" to the image instance created in the loadImage method.

Please let me know what you think!