background

Since qr codes are often used in project development, whether you use React or Vue framework, you will always look for the relevant encapsulated framework. They are all based on Qr.js or qrcode.js with a shell, and there are some other versions of the implementation. You can even add features directly to QR.js. Look at this project is 8 years ago, indicating that the two-dimensional code generation algorithm is stable, but also reflects its relatively complex, so that no one has rebuilt the wheel?

Because the two-dimensional code is often used, do not understand the principle of understanding, always feel the lack of fun. Tried to find some articles:

  1. Two-dimensional code generation details and principles
  2. Deep exploration of two-dimensional code principle and application
  3. Two-dimensional code generation principle and analysis code
  4. qrcode tutorial

I feel that all the articles are introduced according to the norms, and the content of the blog articles is almost the same. Anyway, after reading, I not only did not understand, but also was persuaded to quit several times. In line with the attitude of not being unconvinced, this week decided to look at the source code + look at the blog => simple version of the TWO-DIMENSIONAL code. This process took a whole day or so, after the code, some of the concepts of the TWO-DIMENSIONAL code is not quite understood, especially the error code related, involving should be very complex mathematical knowledge, tangled for a long time, or give up. The code involved in the article can see the simple version of the TWO-DIMENSIONAL code

Actual combat preparation

Select the source code

I have used several versions of qrcode, such as qrcode-terminal,qrcode. react,qrcode.js, etc. The corresponding qrcode implementation can be seen from github. Qrcode.react references qr.js; Qrcode.js also contains the implementation of Qrcode directly, but in a compressed version. After comparison, I chose to read QR. Js. The reason for choosing it seems more original and the structure is clearer.

Theoretical preparation

It’s recommended to watch it before you go into actionTwo-dimensional code generation principle and analysis codeGet lost in the details of the code, so take a quick look at the source code against this document. At least this diagram needs to be understood:

Environment to prepare

Before hand-lifting the code, because it was developed locally, in order to facilitate preview and debugging, it was expected that the two-dimensional code could be directly displayed in terminal. Therefore, a tool for preview two-dimensional code in terminal was first completed by referring to the practice of Qrcode-Terminal. For details, please refer to Terminal to display the TWO-DIMENSIONAL code

Hand rolled code

The manual code implements a generationhello worldQr code, first on the QR code:

The code structure

After a rough look at the source code, combined with the documentTwo-dimensional code generation principle and analysis codeIn the process of generating two-dimensional code, the idea is based on the following picture:Because the idea is to complete a simple version of the TWO-DIMENSIONAL code generator, for convenience, all the codes are put in a file, the code structure is:

Specific code can see the simple version of the TWO-DIMENSIONAL code

1. Initialization

Because there are many versions of the TWO-DIMENSIONAL code, different versions of the size is not the same, the original version of the implementation of version1, but too simple, even an alignment pattern did not have, so the implementation of version2, the use of Byte Mode (Byte Mode) Mode, the two-dimensional code generated by different modes corresponding to the binary number is not the same. Set the version at initialization, and create a Modules property to store two-dimensional code pattern information, using 1 to identify the black block, 0 to identify the white block, null to indicate that has not been processed, vomiting blood experience, pattern information needsThree state, at the beginning of the implementation I have to initialize to 0, after processing data code and error correction code, there will be a problem.

2. Realization of positioning pattern

The positioning pattern is the square in the upper left, upper right and lower left corner respectively, with fixed size, as shown below:

When implementing it, don’t forget that the positioning image needs to be wrapped in a white block, namely the “Separators Fro Position Detection Patterns” in the 2d diagram in the theoretical preparation, which is another pit. The implementation method is also relative to the source code trick, generate a two-dimensional array to identify the square, as shown in the following figure, and then traverse the two-dimensional array, set the corresponding position in the Modules property:

Similarly, because the alignment pattern is also a fixed size square, the implementation is similar, I will not repeat, specific can see the source code. Effect picture:

3. Timing pattern realization

The timing pattern is the two lines formed by the three corners of the positioning picture, which should be the simplest one:

Corresponding effect is:

4. Version & format information

The version and format information consists of 15 bits, including 5bits of data and 10bits of error correction. The data bit is 2bits and the error correction level is 3bits. A total of two locations will be stored, the one on the left of the picture below. Involves the generation of error correction, the beginning of the need to use some mathematical knowledge, I do not understand ah, according to qr. Js implementation of the transformation of some, code directly look at the source bar, last effect picture:

5. Data code & error correction code

The hardest part, the longest I’ve seen, involves binary operations, which are not quite the same as regular operations. There are two main difficulties:

  1. The head is 4bit encoding mode, followed by 8bit data size, after the arrangement also need to generate data code according to 8bit, the source code is not easy to understand, with conventional ideas transformed.
  2. Error correction code will involve polynomial calculation, sorry, this is really stupid, directly copyqr.jsSource code in the implementation.

Use the following function to generate the binary code for the corresponding digit

function getBinary(num, length) {
  const long = '00000000000000000000000000000000' // The length should be larger than the length
  const binary = num.toString(2)
  if (binary.length < length) {
    return long.slice(0, length - binary.length) + binary
  }
  return binary
}
Copy the code

Specific use is as follows:After the error correction code is also meng state, involving polynomial, maskPattern, may be too simple copy, try different mask (corresponding source maskPattern field, can be 0-7 a total of 8 modes), are almost the same, directly on the effect picture:

conclusion

Two-dimensional code implementation, although the actual significance is not much, but some psychological joy, break a magic barrier. Although it involves more theoretical knowledge, but do not understand, can use their own way to achieve their own way to achieve, does not matter good or bad, with their own way to achieve, broaden their ideas, but also a way to deepen understanding.