Interesting QR code

The content of this article has nothing to do with technology. It is a simple sharing, mainly about the design principle of TWO-DIMENSIONAL code and some interesting extensions. Interested students can continue to read ~

Principle of TWO-DIMENSIONAL code

advantages

Before the advent of qr codes, one-dimensional codes (bar codes) were used in scenarios requiring similar codes; But bar codes carry so little information that they can only be used in some very simple scenarios, so bar codes are not widely popular except for information about goods.

Two-dimensional code has the following advantages:

  • High density coding, large information capacity: can accommodate up to 1850 capital letters or 2710 numbers or 1108 bytes, or more than 500 Chinese characters, about dozens of times higher than ordinary bar code information capacity.
  • Wide coding range: the barcode can encode pictures, sound, text, signature, fingerprint and other digitized information, represented by barcode; Can represent a variety of languages; Image data can be represented.
  • It has strong fault tolerance and error correction function: this enables 2d barcode to be correctly read when local damage is caused by perforation and defacement, and the information can still be recovered when the damaged area reaches 50%.
  • High reliability of decoding: it is much lower than ordinary barcode decoding error rate of two per million, the error rate is not more than one in ten million.
  • Can introduce encryption measures: confidentiality, good anti-counterfeiting.
  • Low cost, easy to make, durable.
  • Bar code symbol shape, size ratio variable.
  • 2d bar codes can be read using a laser or CCD reader.

Introduction to the

We can start by trying to generate a QR code. Kazuhikoarase. Making. IO/qrcode – gene…

As can be seen from the figure, the TWO-DIMENSIONAL code has four variables, the main two of which are:

  • Version (TypeNumber)

A total of 40 sizes, corresponding to 40 versions; Version1 is a 21*21 rectangle, with each subsequent version increasing in size by 4, i.e. (v-1) 4+21, up to Version40, 177177 square.

  • Error tolerance level

Fault tolerance rate of two-dimensional code refers to the two-dimensional code icon is blocked how much, can still be scanned out. The higher the fault tolerance rate, the more part of the TWO-DIMENSIONAL code picture can be blocked. The QR code has 4 fault tolerance levels:

The two-dimensional code generated in different configurations varies according to the previous configurations, but the scanned content is the same.

Design principle

The two-dimensional code we see everyday is a picture mixed with black and white blocks. We certainly know that these black and white blocks are some kind of coding of the content, but in fact, in addition to the content, the two-dimensional code has many other auxiliary scanning code recognition information.

As shown in the figure above, from top to bottom, as marked on the right, they are:

Functional areas:

  • Position detection graph: located in the upper left, lower left and upper right of the three rectangles, can be said to be the most important part of the TWO-DIMENSIONAL code.

    • Determine the two-dimensional code placement direction: no matter along the sweep backward, can accurately find the position of the first encoding character (left upper rectangle on the right); If any rectangle is obscured, the scanning device cannot locate it.
    • Determine the boundaries of coded characters: Determine the upper, lower, left and right boundaries of coded characters without interference from other information around them.

  • Location detection graph separator: A white border around a location detection graph, used to separate the location detection graph from the data.

  • Location graph: two “lines” between the three position detection graphs are used to determine the coordinates of the modules in the two-dimensional code symbol (equivalent to the coordinate axes).

  • Correction graph: used to correct positioning (version 2 and above only), the higher the number of versions, to correct for possible positioning offset.

From Google search two-dimensional code pictures, it can be observed that these two-dimensional codes have location detection graphics, location detection graphics separator and positioning graphics. In the third one, the positioning pattern is not quite right, and indeed it cannot be scanned out.

Data area:

  • Format information: Stores information such as error correction code type and mask type.
  • Data and error correction code word: The most important part, used to store data and error correction information.

Excluding the location area and format information, the data and error correction code words are arranged as follows:

Generating process

After all the data has been placed, there is one more step: add the mask. The mask is mainly to avoid the difficulty of scanning recognition if there is a large area of blank or black block. Commonly used masks are as follows:

After the data is masked, there is basically no large area of black and white blocks, which is convenient for scanning.

The mask will only XOR with the data area and will not affect the functional area.

An overview of the code

As long as follow the above two-dimensional code specifications, generate the corresponding two-dimensional code graphics, the specific implementation of the logic does not affect. Here we refer to jquery-QrCode for a brief look at the implementation. The main process is as follows:

makeImpl : function(test, maskPattern) {


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

    this.modules = new Array(this.moduleCount);

    for (var row = 0; row < this.moduleCount; row++) {
    
      this.modules[row] = new Array(this.moduleCount);
      

      for (var col = 0; col < this.moduleCount; col++) {
        this.modules[row][col] = null;//(col + row) % 3;}}this.setupPositionProbePattern(0.0);// Position detection graph

    this.setupPositionProbePattern(this.moduleCount - 7.0);// Position detection graph

    this.setupPositionProbePattern(0.this.moduleCount - 7);// Position detection graph

    this.setupPositionAdjustPattern(); // Correct the graph

    this.setupTimingPattern(); // Position graph (axis)

    this.setupTypeInfo(test, maskPattern); // Version information

   

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

    if (this.dataCache == null) {
      this.dataCache = QRCode.createData(this.typeNumber, this.errorCorrectLevel, this.dataList); // Generate data
    }

    this.mapData(this.dataCache, maskPattern); // Add a mask
  },
Copy the code

After generating 2d data, plot 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( var row = 0; row < qrcode.getModuleCount(); row++ ){
        for( var col = 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;

    }
Copy the code

Art QR Code

Everyday we see two-dimensional code are black and white, but in fact two-dimensional code can be colorful.

There are many styles here, you can try themQrbtf.com/.

The two-dimensional code can be colorful, because the useful information of the two-dimensional code is only 0 and 1, and what information is expressed with 0 and 1, as long as the scanning software can identify it. The current scanning software is generally grayscale processing of the picture, so no matter how the point on the TWO-DIMENSIONAL code is expressed, as long as 0 and 1 are not reversed after grayscale processing, the information will not go wrong and will not affect the scanning result.

Art two-dimensional code is also not difficult to achieve, as long as the distinction between specific data areas, and specific image rendering can be interested in github.com/252860883/A…

More simply, you can also directly reduce the black and white opacity and render the background to a specific image; If it is only displayed on the web, it can be made into a GIF.


However, art TWO-DIMENSIONAL code has more interference information due to its richer color, so compared with black and white two-dimensional code, art two-dimensional code has higher requirements for scanning software.

Small program code

Small program code and TWO-DIMENSIONAL code although look completely different, but their design idea and generation process is basically the same.

  • With position detection graphics;
  • Supports 3 capacities: 36 ray, 54 ray and 72 ray;
  • With L, M, Q, H four fault tolerance levels;
  • Mask operation is uniform 0, 1 code point;

Ps: After understanding the principle of two-dimensional code, in fact, we can also draw two-dimensional code by hand. Scatter, propose what, with red rose and white rose put a TWO-DIMENSIONAL code, girlfriend sweep code out a look write “Marry Me!” , ha ha ha is not a little programmer romance 😬~

reference

  • You don’t know how little code blooms
  • Two-dimensional code generation details and principles
  • www.zhihu.com/question/21…

Text links in

  • Kazuhikoarase. Making. IO/qrcode – gene…
  • Github.com/jeromeetien…
  • qrbtf.com/
  • Github.com/252860883/A…