Image compatible
dodomui opened this issue · 8 comments
-
Unable to set hideBackgroundDots: true on Safari Browser.
Result: The spacing of the image will become a blank empty space, without any image render. -
Can use base64 image on chrome browser only, unable to work on safari and ionic platform.
Result: No image generated. -
Unable to use external url for image.
Result: No image generated. -
Unable to read image while using Ionic + Capacitor + Angular, on mobile platform, eg iOS and Android.
Result: Once passed image the whole QR code unable to generate.
I love qr-code-styling it really solve the problem and look nice, but I need it to works on Ionic platform.
Any ideas?
I have the same issue
It started working for me after I passed a margin into the options.
new QRCodeStyling({
...
imageOptions: {
crossOrigin: 'anonymous',
margin: 0, // <- This fixed the issue for me
},
})Edit: turns out it was not the fix. The issue occurs the first time the QR loads. Then, it doesn't occur anymore. Still looking into a fix.
Removing the type 'svg' fixed it for me:
new QRCodeStyling({
width: size,
height: size,
// type: 'svg', <- Removing this line fixed it for me
data,
...
})Having the same issue when loading for the first time. After a refresh, the image loads. @Kiesco08 is the image still an SVG when you remove that 'type' property? My guess is it's now a .PNG.
It becomes an PNG. In my case, I needed to display the QR on a webpage, and offered a "Download" button. I worked around the issue by having two version of the same QR code:
- When displayed, I use an SVG
- When downloading, I create a new QR code that uses PNG
Actually never mind, I have a regression.
I found out that upgrading the qrcode-generator library to the latest version fixed the issue.
But I didn't want to fork my own version of qr-code-styling, so I ended up fixing the issue by using the maintained version instead:
In package.json:
"dependencies": {
"qr-code-styling": "https://github.com/sallandpioneers/qr-code-styling.git",
}