IM Scan Code Login Technical Topic (4): Do you really understand QR codes? Get to the bottom of the question and master it in one article!

This article quotes the content of the article shared by the ELab team and the Tencent Lecture Hall. For the quoted content, please refer to the reference materials at the end of the article. Thank you for the selfless sharing of the original author.

1 Introduction

For mainstream IMs on the market, functions related to QR codes, such as scan code to add friends, scan code to log in, scan code to add groups, etc., are very common.

This is the scan code login function of WeChat:

This is the scan code and add friend function of WeChat:

The two-dimensional code technology is very simple to use. The first three articles in this series also specifically share the function of IM scanning code login. However, in the habit of learning technology without leaving dead ends, I think it is necessary to learn it separately. What is the QR code Stalk"...), this is also the purpose of this article.

Note: To be precise, the most commonly seen QR code is actually the QR code, which is currently the most widely used type of QR code in China. For the sake of simplicity, unless otherwise specified, the two-dimensional codes mentioned in this article refer to QR codes.

study Exchange:

• 5 groups for instant messaging/push technology development and communication: 215477170 [recommended]
• Introduction to Mobile IM Development: "One entry is enough for novices: Develop mobile IM from scratch"
• Open source IM framework source code: https://github.com/JackJiang2011/MobileIMSDK

(This article was published synchronously at: http://www.52im.net/thread-3735-1-1.html)

2. Thematic catalog

This article is the fourth in a series of articles. The general content is as follows:

"IM Scan Code Login Technology Topic (1): Debugging and Analysis of Technical Principles of WeChat Scan Code Login Function"
"IM Scan Code Login Technology Topic (2): Debugging and Analysis of the Principles of the Mainstream Scan Code Login Technology in the Market"
"IM Scan Code Login Technology Topic (3): Easy to understand, one detailed principle of IM scan code login function is enough"
"IM Scan Code Login Technology Topic (4): Do you really understand QR codes? Get to the bottom of the question and master it in one article! "(* This article)

Recommendation: The other "Rare Dry Goods, Revealing Alipay's 2D Code Scanning Technology Optimization Practice Road" can be read together.

3. The origin of the QR code

To be precise, the most commonly seen QR code is actually the QR code, which is currently the most widely used QR code in China. For the sake of simplicity, unless otherwise specified, the two-dimensional codes mentioned in this article refer to QR codes.

3.1 Time background
After the 1960s, the Japanese economy ushered in a period of rapid growth, and supermarkets with a wide range of commodities began to appear in cities.

At that time, the cash register used in supermarkets had to manually enter the price of goods, so the person in charge of the cash register often suffered from wrist numbness and "tenosynovitis".

"Can you reduce the burden on supermarket cashiers?"

The emergence of barcodes solved this distress. Due to the successful development of the POS system, the price will be automatically displayed on the teller machine only by reading the bar code through light sensing, and the read product information can also be transmitted to the computer.

As a result, barcodes have become popular, but new issues have followed. The problem is that the capacity of bar codes is limited, and English numbers can only hold up to 20 characters.

"It would be nice if the code itself can contain more information", "I hope it has the processing function of Chinese characters and kana".

Denso Wave (a subsidiary of Denso Corporation), which was engaged in the development of bar code readers at the time, understood such needs. In this context, the R&D team invested in the research and development of the new QR code with the wish of "meeting customer needs".

3.2 Research and development group of 2
“At that time, the QR codes developed by other companies focused on the inclusion of information,” Masahiro Hara, who was in charge of the development of QR codes at the time, said in retrospect.

▲ The "strange uncle" in the picture above is Masahiro Hara (Masahiro Hara)

Barcodes can only store information horizontally (one-dimensionally), in contrast, two-dimensional codes can store information vertically and horizontally. Teng Hongyuan’s consideration is that in addition to being able to accommodate a large amount of information, "the code developed should be easy to read", and accordingly invested in the development of a new two-dimensional code. The R&D team has only two people.

3.3 Technical difficulties
The biggest technical problem facing Masahiro Hara's R&D team is how to achieve high-speed reading.

One day, Teng Hongyuan had such a thought in his mind: "What will happen if you attach location information like'here is a code'?"

So what comes to mind is the "positioning pattern" of the back shape. Put this graphic into the QR code to achieve high-speed reading that other companies cannot imitate.

▲ The three-corner back-shaped pattern in the picture above is the "positioning pattern"

▲The ratio of black and white blocks of "positioning pattern" is 1:1:3:1:1

3.4 Why is the "positioning pattern" a back font?
Why does the positioning pattern use the kind of back font?

Teng Hongyuan explained: "Because this kind of graphics appears the least frequently in bills, etc.".

In other words: if there is the same pattern nearby, the reader will mistake it for a code. In order to prevent this misreading, the positioning pattern must be the only pattern.

After comprehensive consideration: Teng Hongyuan and others decided to turn all the drawings and texts printed on advertisements, magazines, cardboards, etc. into black and white, and conduct a thorough investigation of their area ratios.

As a result of the R&D team investigating countless printed materials day and night, they finally identified the "least frequently used ratio" in printed materials, namely 1:1:3:1:1.

In this way: the width ratio of the black and white part of the positioning pattern is determined. The resulting structure is that the scan line can be scanned from 360 degrees, no matter from which direction it is scanned, once its unique ratio is scanned, the position of the code can be calculated.

▲Return type "positioning pattern" makes it can be recognized normally no matter which direction you scan from

After a year and a half after the start of the R&D project, and after several twists and turns, a QR code (QR code, to be precise) that can hold approximately 7000 numbers was finally born. It is characterized by the ability to process Chinese characters, large capacity, and the reading speed is more than 10 times faster than other codes.

3.5 Patent fees for QR codes
Since the two-dimensional code (QR code to be precise) was researched by companies and individuals, how should the patent fees be collected today?

According to anecdotal rumors, Teng Hongyuan said this: "This kind of technology can be realized by just finding a network tool, so I won't charge royalties for such a simple thing."

Of course the above are just rumors and should not be true.

In fact, Denso Wave owns the patent right of QR code, and can charge the company or individual using QR code for patent fees, but Denso Wave has made it clear that it will not exercise this right. This is the policy set at the beginning of the research and development, and it also reflects the idea of the developer: "I hope more people can use the QR code."

Therefore, the QR code, which is cost-free and can be used with confidence, has now been used as a "public code" and has been widely used all over the world.

4. The advantages of QR codes

Back to the technology itself, let’s first summarize the advantages of QR codes from a modern perspective.

Before the advent of the two-dimensional code, when a scene with a similar code was required, the one-dimensional code (barcode) was used.

However, barcodes carry too little information and can only be used in some very simple scenarios. Therefore, barcodes are not widely popular except for information such as commodities.

To sum up, the two-dimensional code has the following advantages:

1) Large information capacity: it can hold up to 1850 capital letters or 2710 numbers or 1108 bytes, or more than 500 Chinese characters, which is about dozens of times higher than the information capacity of ordinary barcodes;
2) Wide coding range: The barcode can encode digitized information such as pictures, sounds, texts, signatures, fingerprints, etc., and express it with a barcode;
3) Strong fault tolerance: With error correction function, this enables the 2D barcode to be read correctly even when it is partially damaged due to perforation, contamination, etc., and the information can still be restored when the damaged area reaches 50%;
4) Decoding reliability: It is much lower than ordinary barcode decoding error rate of 2 parts per million, and the error rate is not more than 1 part per million;
5) Encryption can be introduced: confidentiality and anti-counterfeiting are good;
6) Low cost of use: easy to make and durable.

5. Get to know the QR code for the first time

We can try to generate a QR code first. The demo address is: https://kazuhikoarase.github.io/qrcode-generator/js/demo/.

As shown in the figure above: It can be found that the QR code has 4 variable items, of which the main 2 are version and fault tolerance.

1) Version (TypeNumber):

There are a total of 40 sizes, corresponding to 40 versions; Version1 is a rectangle of 21*21, and every time a version is added, the size of 4 is increased, that is, (v-1)4+21, and the highest is Version40, a square of 177177.

2) Error tolerance rate (ErrorCorrectionLevel):

The fault tolerance rate of the QR code refers to the ability of the QR code icon to be scanned even after it is blocked. The higher the error tolerance rate, the more parts of the QR code picture that can be blocked.

The QR code has 4 fault tolerance levels:

According to the above configuration, the same content, the QR code generated under different configurations is different, but the scanned content is the same.

6. The design principle of the dilemma

The QR code we see every day is a picture of black and white blocks mixed together. We must also know that these black and white blocks are some kind of encoding of the content, but in fact, in addition to the content, there are many more QR codes. Other auxiliary scan code identification information.

As shown in the figure above, in the order from top to bottom marked on the right, they are the functional area and the data area.

6.1 Function area
The main content of the functional area is:

1) Position detection graphics: The three rectangles located on the upper left, lower left, and upper right are the most important part of the QR code;
2) Position detection graph separator: The white border around the position detection graph is used to separate the position detection graph and data.
3) Positioning graphics: the two "lines" between the three position detection graphics are used to determine the coordinates of the module in the QR code symbol (equivalent to coordinate axes);
4) Correction graphics: used to correct positioning (only available in version 2 and above), the higher the version, the more the number is to correct the possible positioning offset.
The main functions of the position detection graphics are:

1) Determine the placement direction of the QR code: Regardless of whether you swipe down or down, you can accurately find the position of the first coded character (to the right of the upper left rectangle); if any rectangle is blocked, the scanning device will not be able to locate it;
2) Determine the boundary of the coded character: Determine the upper, lower, left, and right boundaries of the coded character without being disturbed by other surrounding information.
Searching for two-dimensional code pictures from the Internet, you can observe that these two-dimensional codes all have position detection graphics, position detection graphics separators, and positioning graphics.

In the third one, the positioning graphic is not right, and it really can’t be scanned out:

6.2 Data area
The main contents of the data area are:

1) Format information: store information including error correction code type, mask type, etc.;
2) Data and error correction code words: the most important part, used to store data and error correction information.
Excluding the positioning area and format information, the arrangement of data and error correction code words is as follows:

7. Generation process of QR code

After all the data has been placed, there is one more operation: add a mask.

The main purpose of the mask is to avoid, if a large area of blanks or black blocks appear, it will be difficult for us to scan and identify.

The commonly used masks are as follows:

After the data is masked, there are basically no large areas of black and white blocks, which is conducive to scanning.

Note: The mask will only be XORed with the data area and will not affect the functional area.

8、Show me the code

As long as the above two-dimensional code specifications are followed, the corresponding two-dimensional code graphics can be generated, and the specific implementation logic does not affect.

Here we refer to jquery-qrcode to briefly look at the implementation.

The main process is as follows:

makeImpl : function(test, maskPattern) {

this.moduleCount = this.typeNumber * 4 + 17;

this.modules = newArray(this.moduleCount);

for(varrow = 0; row < this.moduleCount; row++) {
  this.modules[row] = newArray(this.moduleCount);

  for(varcol = 0; col < this.moduleCount; col++) {
    this.modules[row][col] = null;//(col + row) % 3;

  }

}

this.setupPositionProbePattern(0, 0);// 位置探测图形

this.setupPositionProbePattern(this.moduleCount - 7, 0);// 位置探测图形

this.setupPositionProbePattern(0, this.moduleCount - 7);// 位置探测图形

this.setupPositionAdjustPattern(); // 校正图形

this.setupTimingPattern(); // 定位图形（坐标轴）

this.setupTypeInfo(test, maskPattern); // 版本信息

if(this.typeNumber >= 7) {
  this.setupTypeNumber(test);

}

if(this.dataCache == null) {
  this.dataCache = QRCode.createData(this.typeNumber, this.errorCorrectLevel, this.dataList); // 生成数据

}

this.mapData(this.dataCache, maskPattern); // 加入掩码

},

After generating the two-dimensional data, draw the points one by one:

var createCanvas = function(){

  // create the qrcode itself

  var qrcode  = new QRCode(options.typeNumber, options.correctLevel);

  qrcode.addData(options.text);

  qrcode.make();

  // create canvas element

  var canvas  = document.createElement('canvas');

  canvas.width  = options.width;

  canvas.height = options.height;

  var ctx   = canvas.getContext('2d');

  // compute tileW/tileH based on options.width/options.height

  var tileW = options.width  / qrcode.getModuleCount();

  var tileH = options.height / qrcode.getModuleCount();

  // draw in the canvas

  for( varrow = 0; row < qrcode.getModuleCount(); row++ ){
    for( varcol = 0; col < qrcode.getModuleCount(); col++ ){
      ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;

      var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));

      var h = (Math.ceil((row+1)*tileH) - Math.floor(row*tileH));

      ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h); 

    }

  }

  // return just built canvas

  return canvas;

}

9. Art QR code

Everyday the QR codes we see are black and white, but in fact, the QR codes can be colorful.

There are many styles here, you can try: https://qrbtf.com/.

The reason why the QR code can be colorful is that the useful information of the QR code is only 0 and 1. As for what information is used to express 0 and 1, as long as the scanning software can identify it. The current scan code software generally performs grayscale processing on pictures, so no matter how the points on the QR code are expressed, as long as 0 and 1 are not reversed after grayscale processing, the information will not be wrong and will not affect the scan code result .

Art QR code is not difficult to implement, as long as it distinguishes specific data areas and renders them with specific pictures. If you are interested, you can refer to: https://github.com/252860883/ArtQRCode.

To make it simpler, you can also directly reduce the black and white transparency, and render a specific image in the background:

If it is only displayed on a webpage, it can also be made into a gif animation form (the sample is not posted here).

However, because of the richer colors of the artistic QR code, which interferes with more information, compared to the black and white QR code, the artistic QR code has higher requirements for scanning software.

10. WeChat Mini Program Code

Although the applet code and the two-dimensional code look completely different, their design ideas and generation process are basically the same.

As shown in the figure above, the characteristics of the WeChat applet code are:

1) With position detection graphics;
2) Support 3 types of capacities: 36 rays, 54 rays and 72 rays;
3) There are 4 fault tolerance levels of L, M, Q, and H;
4) The mask operation is uniformly 0 and 1 code points.

Digression: After understanding the principle of the QR code, we can actually draw the QR code by hand.

11. An interesting question: "Will the QR code be used up?"

This question is very simple, the answer is: yes.

Because the size of the QR code is limited, the number of QR codes is limited.

But it takes a long, long time to use up all the QR codes. . .

Currently there are 40 official versions of QR codes. From Version1-40, the minimum is 21 21, and the maximum is 177 177 matrix.

Among them, taking the WeChat business card as an example, it is a 37×37 matrix specification, and the WeChat payment code is a 25×25 matrix specification. To facilitate understanding, we use squares as the matrix unit.

▲ The picture above is a WeChat business card (ie a QR code with a 37×37 matrix)

How to calculate the number of QR codes generated in each matrix?

Let's take an example:

In the four-square grid shown in the figure above, each grid has two color changes. How many graphics can be combined in a four-square grid?

The answer is: one grid has two colors, that is two possibilities, two grids are four possibilities, three grids are 8 possibilities, and four grids are 16 possibilities. Therefore, the four-square grid can form 2^4, a total of 16 graphics.

By analogy, take WeChat’s 25X25 payment code as an example:

There are 25 squares in each row, a total of 25 rows. Excluding the positioning squares and redundant error correction squares, there are 478 squares left. According to the binary system, each square has only two choices of black or white, so 478 small squares can theoretically combine 2^478 two-dimensional codes in total.

That is, a QR code of 25X25 size can be generated:

780437137578998057845399307448291576437149535666242787714789239906342934704941405030076525765872992789956732780351655723861993919822071326572544 two-dimensional codes.

How many can you try to read out?

Calculated based on the number of 140 billion QR codes during the epidemic, assuming that WeChat will consume 600 billion QR codes a year. How many years does it take for the micro-credit to drop the QR code generated by the size of 25X25?

Let's calculate: 2^478/600 billion = 1.301×10^132 years (more than billion billion billion billion years).

So: Although in theory the day when the QR code is used up, in fact this time has helped so long that we don’t have to think about it now!

12. Reference materials

[1] Rare dry goods, reveal the road to optimization practice of Alipay’s 2D code scanning technology
[2] You scan the QR code every day. Do you know how it came from?
[3] QR code, do you really understand it?
[4] Will the QR code be scanned by humans?
[5] The road to success with QR codes
[6] Interesting QR code

Appendix: More IM-related entry-level articles

"One entry is enough for novices: develop mobile IM from scratch"
"Technical Past: The TCP/IP Protocol That Changed the World (Precious Multi-Pictures, Be Careful on Mobile Phones)"
"Easy to Understand-Deep Understanding of TCP Protocol (Part 1): Theoretical Foundation"
"Introduction to Network Programming for Lazy People (1): Quickly Understand Network Communication Protocol (Part 1)"
"Lazy Introduction to Network Programming (2): Quickly Understand Network Communication Protocol (Part 2)"
"Introduction to Brain Disabled Network Programming (1): Follow the animation to learn TCP three-way handshake and four waved hands"
"Introduction to Brain Disabled Network Programming (2): When we read and write Socket, what exactly are we reading and writing? 》
"Introduction to network programming has never been easier (1): If you were to design a network, what would you do? 》
"Introduction to network programming has never been easier (2): If you were to design the TCP protocol, what would you do? 》
"Introduction to Zero-Basic Communication Technology for IM Developers (11): Why is the WiFi signal poor? Understand in one article! 》
"Introduction to Zero-Basic Communication Technology for IM Developers (12): Is the Internet stuck? Internet disconected? Understand in one article! 》
"Introduction to Zero-Basic Communication Technology for IM Developers (13): Why is the mobile phone signal poor? Understand in one article! 》
"Introduction to Zero-Basic Communication Technology for IM Developers (14): How difficult is it to surf the Internet on high-speed rail? Understand in one article! 》
"Understanding high performance and high concurrency from the root (1): Going deep into the bottom of the computer, understanding threads and thread pools"
"Understanding high performance and high concurrency from the root (2): In-depth operating system, understanding I/O and zero copy technology"
"Introduction to the strongest Java NIO in history: For those who are worried about getting started to giving up, please read this! 》
"Quick Start of IM Communication Technology on the Web: Short Polling, Long Polling, SSE, WebSocket"
"Understanding modern web-side instant messaging technology is enough: WebSocket, socket.io, SSE"
"A set of mobile IM architecture design practice sharing for massive online users (including detailed graphics and text)"
"An Original Distributed Instant Messaging (IM) System Theoretical Architecture Plan"
"A set of IM architecture technical dry goods for hundreds of millions of users (Part 1): overall architecture, service split, etc."
"A set of IM architecture technical dry goods for hundreds of millions of users (Part 2): reliability, orderliness, weak network optimization, etc."
"Instant Messaging Audio and Video Development (18): Detailed Explanation of the Principle, Evolution and Application Selection of Audio Codec"
"Instant Messaging Audio and Video Development (19): Zero Foundation, Introduction to the Most Popular Video Coding Technology in History"
"Introduction to Zero Basics: A Comprehensive Inventory of Basic Knowledge of Real-time Audio and Video Technology"
"Introduction to zero-based IM development (1): What is an IM system? 》
"Introduction to zero-based IM development (2): What is the real-time nature of the IM system? 》
"Introduction to zero-based IM development (3): What is the reliability of the IM system? 》
"Introduction to zero-based IM development (4): What is the message timing consistency of the IM system? 》
"Open Source Mobile IM Technology Framework MobileIMSDK: Quick Start"

This article has been simultaneously published on the official account of "Instant Messaging Technology Circle".
The synchronous publishing link is: http://www.52im.net/thread-3735-1-1.html