How does a QR code work?
Ever imagined a QR code scan, that can direct you to a restaurant’s menu card, give you details of a product you buy in a mall? What are those black and white stripes in a bar code? how does it work?
Let’s find it out and make our own QR code using HTML canvas !!!
Bar-Code
Bar-Code basically represents a series of numbers. Each element of a bar code is divided into sets of 7, consisting of black and white strips, each set representing an individual number.
To understand let’s take white lines as ‘0’ and black as ‘1’.So the number 1 is actually represented by 0011001. To buy products the bar-codes have 12 digits, the first 5 representing manufacturing code, the next 5 representing product code, and the last two numbers representing check digits.
Why only black and white stripes?
The answer is simple Physics. Blacklight absorbs light whereas white reflects. So when a laser of suitable frequency sweeps across bar code some of the light gets absorbed, some get reflected. The scanner detects the amount of light and interprets the number behind it.
QR code(Quick Response Code)
Components
How does our camera/scanner detects the presence of QR code?
It’s due to the presence of positioning detection marks (Red).
The Timing marks(Blue) show how large the data matrix is.
There are many versions/types of QR codes. The version of the code is identified by the version information marks (Dark Blue).
To straighten the QR code on a curved surface alignment marking(Purple) is used.
The format information(Yellow) contains about error tolerance which makes it easier to scan the code.
The rest black and white space is actually where the information is stored. Let’s see how.
The QR code follows a zig-zag pattern(in pairs) to read values where black is represented by ‘1’ whereas white is ‘0’.
The first 4 bytes (from the bottom corner) represent the encoding. It might be bytes, numeric, alphanumeric, and kanji(Logographic writing system).
The next 8 bytes represent the length of the message represented by the QR code.
After that, all the next blocks represent an 8-bit binary number which further is converted into decimal values which when looked upon the ASCII table represents a letter.
The E1, E2, E3, etc represent the error correction that is required to restore data if the code is dirty or damaged.
For example-
The first block which is of 4 bytes represents its encoded in bytes
The second represents the length of the message. The dark blue represents ‘1’ and light blue as ‘0’ which makes the block 00001000 which is equal to 8 in binary. It means the length of the message is 8.
In the next block using the zig-zag pattern we traverse through the 8 bytes block and note the number. Here the binary number is 01000100 when converted to binary is 68 which is the ASCII value of the letter D.
And by the same way rest of the message is encoded.
Here comes the interesting part, Can we generate our own QR code?
YES, we can!
QRious is a pure JavaScript library for generating QR codes using HTML5 canvas.
QRious uses Html5 canvas. Here a constructor is created which retrieves the canvas element by id and the value is the link that we want to get through the QR code when scanned.
Conclusion
QR code and Bar code mostly use a combination of binary codes to represent a message which in fact is fast, reliable, easy to access. QR Code stores the information in the matrix, which stores the information on both axes horizontally or vertically. Whereas Bar code does in horizontal form.
QR codes seem to be an advanced mode of advertising and marketing that brings innovation to the field. Living in such a fast-paced life, QR code exponentially reduces the time of doing the various tasks from getting information about a product to secure encryption.
Happy Coding!
This article is published as a part of ‘JavaScripted’ under Spider Research and Development Club, NIT Trichy on a Web Wednesday!
