Image compatible

[dodomui]

1. Unable to set hideBackgroundDots: true on Safari Browser. Result: The spacing of the image will become a blank empty space, without any image render.

2. Can use base64 image on chrome browser only, unable to work on safari and ionic platform. Result: No image generated.

3. Unable to use external url for image. Result: No image generated.

4. 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?

[Kiesco08]

I have the same issue

[Kiesco08]

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.

[Kiesco08]

Removing the type 'svg' fixed it for me:

new QRCodeStyling({
    width: size,
    height: size,
    // type: 'svg', <- Removing this line fixed it for me
    data,
    ...
})

[sirwesley]

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.

[Kiesco08]

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

[Kiesco08]

Actually never mind, I have a regression.

[Kiesco08]

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",
  }

[Bruce-ui]

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.

Same issue, Have you fixed it now ?