search

gerardreches / vue-qrcode-component

Create QR codes with a simple Vue component
https://gerardreches.github.io/vue-qrcode-component/
MIT License
124 stars 21 forks source link

add border white for Standards #10

Closed biigpongsatorn closed 5 years ago

biigpongsatorn commented 5 years ago

QR Code must have border white for QR code reader.

If the QR has no border that will can't read.

https://en.wikipedia.org/wiki/QR_code#Standards

standard: download

vue-qrcode-component download (1)

gerardreches commented 5 years ago

Hi @biigpongsatorn ,

I've done some searching about your point, but although it's recommended, I couldn't find any official standard saying that it must be that way. Actually, QR codes can be read without a white border, just notice that the background around the QR code should have enough contrast (placing the QR code on top of some images might not be a good idea):

The easiest way to add branding power to your code is to add color to it. Your QR code does not have to be standard black and white in order to be scanned. You can embed multiple colors and apply a color gradient without affecting scanability. The only rule of thumb is that the code color should generally be dark and placed against a light-colored background. Make sure the contrast is sufficient, or the code will be difficult to scan.

A “reversed out” code, where the background is dark and the boxes are light colored, is generally not recommended. Only a small handful of QR code readers can treat such codes as a film negative and properly interpret the data.

Source: https://mashable.com/2011/04/18/qr-code-design-tips

Your QR scanner should be even able to scan that complex QR code.

Since the library this component is based on doesn't include a border, I will decide not to add it either.

Solution:

If your QR code is unreadable because it's on top of a darker background or an image, remember that you can treat the component as any other container, so you can add the CSS properties border or padding + background-color to create your custom quiet zone around your QR code.