zpao / qrcode.react

A <QRCode/> component for use with React.
https://zpao.github.io/qrcode.react/
Other
3.82k stars 327 forks source link

QR Logo prevents from using the QR link #328

Closed walid-chekkouri closed 8 months ago

walid-chekkouri commented 8 months ago

When I change the logo size to be large it hides the QR code which orders it to be useless, how can I still have the logo but not affect functionality? If the logo is small it still hides some parts of the QR code.

zpao commented 8 months ago

You can up the error correction level, which can help. That will result in more modules and more redundancy so the logo can be larger.

walid-chekkouri commented 8 months ago

Thanks @zpao , the default level is 'L', what do you recommend? Will I run into some future issues when the url becomes longer ?

zpao commented 8 months ago

I would try it until it works. Basically, the "higher" the error correction, the more modules exist outside of the logo space and the more redundancy. https://qrexplore.com/blog/embed-logo-in-qr-code is a quick explanation of the problem. The embedding I have (and likely most other implementations too) is naive. There is a technical limit that I could enforce that prevents covering the essential pieces, though I still couldn't guarantee it's scannable.

The tradeoff of higher error correction is that it might be marginally harder to scan (just smaller modules in the same space), so consider the use case & users - how far away are people scanning from, can the camera/scanner handle that, etc.

FWIW I should write some better docs which basically say what I've said here. I started something there a while ago and need to finish.