Unlocking QR Code Secrets: Principles, Design, and Code Generation

QR Code Principles

This article shares the basic principles and design of QR codes, covering their advantages, structure, error‑correction levels, and generation process.

Advantages

High‑density encoding with large information capacity (up to 1850 alphanumeric characters, 2710 digits, 1108 bytes, or over 500 Chinese characters).

Broad encoding range supporting images, audio, text, signatures, fingerprints, and multiple languages.

Strong error‑correction allowing up to 50% damage while still readable.

Very low decoding error rate (≤1 in 10 million).

Supports encryption for confidentiality and anti‑counterfeiting.

Low cost, easy to produce, durable.

Flexible symbol size and shape.

Readable by laser or CCD scanners.

Overview

A QR code can be generated using online tools such as this demo . The two main configurable parameters are:

Version (TypeNumber): 40 sizes from 21×21 (Version 1) up to 177×177 (Version 40), increasing by 4 modules per version.

Error correction level (ErrorCorrectionLevel): four levels (L, M, Q, H) determining how much of the code can be obscured while remaining readable.

Design Principles

QR codes consist of functional patterns and data areas. Functional patterns include:

Position detection patterns (three large squares at three corners) that establish orientation and module boundaries.

Separators around the detection patterns.

Timing patterns (alternating black/white lines) that act as coordinate axes.

Alignment patterns (present in versions ≥2) for correcting distortion.

The data area contains format information (error‑correction level and mask pattern) and the encoded data with its error‑correction codewords.

Generation Process

After placing all data modules, a mask is applied to avoid large uniform areas that hinder scanning. The mask is XOR‑ed only with the data region, leaving functional patterns unchanged.

Masking operates on the data area via XOR and does not affect functional patterns.

Code Overview

The following JavaScript snippet (based on jquery‑qrcode) demonstrates the core steps of QR code generation:

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;
        }
    }
    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 matrix, the following code renders it onto a canvas:

var createCanvas = function(){
    var qrcode = new QRCode(options.typeNumber, options.correctLevel);
    qrcode.addData(options.text);
    qrcode.make();
    var canvas = document.createElement('canvas');
    canvas.width = options.width;
    canvas.height = options.height;
    var ctx = canvas.getContext('2d');
    var tileW = options.width / qrcode.getModuleCount();
    var tileH = options.height / qrcode.getModuleCount();
    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 canvas;
};

Artistic QR Codes

Beyond traditional black‑and‑white designs, QR codes can be rendered in color or with embedded images, as long as the scanner can correctly interpret the binary data after grayscale conversion. Tools like qrbtf.com enable creative styling, and open‑source projects such as ArtQRCode provide implementations.

Mini Program Codes

Mini‑program codes share the same underlying principles as QR codes but include specific features:

Position detection patterns.

Three capacity options (36, 54, 72 modules).

Four error‑correction levels (L, M, Q, H).

Uniform masking of 0/1 modules.

These codes can be customized for branding or special occasions, such as hand‑drawing a QR pattern with roses for a marriage proposal.

References

“You probably didn’t know how mini‑program codes work.”

“QR Code Generation Details and Principles” – https://coolshell.cn/articles/10590.html

Zhihu discussion: https://www.zhihu.com/question/21023430

Demo and source links: https://kazuhikoarase.github.io/qrcode-generator/js/demo/, https://github.com/jeromeetienne/jquery-qrcode, https://qrbtf.com/, https://github.com/252860883/ArtQRCode