QR Code Technology Explained: Principles, Generation, and Application Scenarios

QR Code (Quick Response Code) is a type of two-dimensional barcode that can store large amounts of data and is easy to scan and recognize. From payment codes to business cards, QR codes have become an indispensable part of daily life. This article explores the principles, generation methods, and application scenarios of QR codes in depth.

I. QR Code Principles

QR Code (Quick Response Code) uses matrix encoding, representing data through the arrangement of black and white pixels. The core of QR codes is encoding data into binary, then converting binary data into black and white modules in the matrix through specific encoding modes. QR codes include position detection patterns, alignment patterns, and data areas, which enable QR codes to be quickly and accurately recognized.

Structure Composition

QR codes are mainly composed of the following parts: 1) Position detection patterns: the square-shaped patterns at the top-left, top-right, and bottom-left corners, used to determine the position and orientation of the QR code; 2) Alignment patterns: used to correct angular deviation during scanning; 3) Data area: stores the actual encoded data; 4) Error correction area: stores redundant data for recovering damaged or blurred parts; 5) Version information: indicates the size and capacity of the QR code.

Encoding Process

The QR code encoding process is divided into several steps: 1) Data encoding: convert input data into a binary stream, select the appropriate encoding mode based on data type (numeric, alphanumeric, binary, Kanji, etc.); 2) Error correction encoding: add error correction codes to improve fault tolerance; 3) Structure encoding: arrange data and error correction codes into the matrix; 4) Masking: apply mask patterns to optimize QR code readability; 5) Format and version information: add format and version information.

II. QR Code Capacity

QR code capacity depends on version and error correction level:

III. Error Correction Levels

QR codes have powerful error correction capabilities:

• Level L: Can recover approximately 7% of data
• Level M: Can recover approximately 15% of data
• Level Q: Can recover approximately 25% of data
• Level H: Can recover approximately 30% of data

IV. Generating QR Codes with JavaScript

4.1 Basic Generation

// Using qrcode.js library
import QRCode from 'qrcode';

async function generateQRCode(text, options = {}) {
  const canvas = document.getElementById('qrcode');
  await QRCode.toCanvas(canvas, text, {
    width: 200,
    margin: 2,
    color: {
      dark: '#000000',
      light: '#ffffff'
    }
  });
}

generateQRCode('https://www.tdsay.cn');

4.2 Custom Styles

await QRCode.toCanvas(canvas, text, {
  width: 300,
  margin: 4,
  color: {
    dark: '#10b981',
    light: '#f0fdf4'
  },
  errorCorrectionLevel: 'H'
});

4.3 Adding Logo

await QRCode.toCanvas(canvas, text, {
  width: 200,
  margin: 2,
  errorCorrectionLevel: 'H' // High error correction level needed
});

// Draw logo manually
const ctx = canvas.getContext('2d');
const logo = new Image();
logo.src = 'logo.png';
logo.onload = () => {
  const size = 40;
  const x = (canvas.width - size) / 2;
  const y = (canvas.height - size) / 2;
  ctx.drawImage(logo, x, y, size, size);
};

V. Common Application Scenarios

5.1 Mobile Payment

Scan-to-pay is the most common application:

// Payment code data format
weixin://pay?appid=xxx&mch_id=xxx&prepay_id=xxx

//收款码
https://qr.alipay.com/xxxx

5.2 Information Sharing

Sharing links, business cards, etc.:

// Website link
https://www.tdsay.cn

// vCard business card
BEGIN:VCARD
VERSION:3.0
N:John Doe
FN:John Doe
TEL:+1234567890
EMAIL:johndoe@example.com
END:VCARD

5.3 Logistics Tracking

QR codes on express waybills:

// Tracking number
SF1234567890

// Full query link
https://www.sf-express.com/sf-service/web/index.html?searchType=1&searchValue=SF1234567890

VI. Security Precautions

• Do not scan QR codes from unknown sources
• Verify QR code content before scanning
• Avoid scanning QR codes containing malicious links
• Use legitimate scanning tools

VII. Advanced Techniques

7.1 QR Code Decoding

Decoding QR codes using JavaScript:

// Decode using jsQR library
import jsQR from 'jsqr';

function decodeQRCode(imageData) {
  const code = jsQR(imageData.data, imageData.width, imageData.height, {
    inversionAttempts: "dontInvert"
  });
  
  if (code) {
    console.log('QR Code content:', code.data);
    console.log('Position:', code.location);
    return code.data;
  }
  return null;
}

// Decode from image
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  decodeQRCode(imageData);
};
img.src = 'qrcode.png';

7.2 Batch QR Code Generation

Generating multiple QR codes in batch:

async function generateBatchQRCode(dataList) {
  const results = [];
  
  for (const data of dataList) {
    const canvas = document.createElement('canvas');
    await QRCode.toCanvas(canvas, data, {
      width: 150,
      margin: 2
    });
    
    results.push({
      data: data,
      base64: canvas.toDataURL('image/png')
    });
  }
  
  return results;
}

// Usage
const qrData = [
  'https://www.tdsay.cn',
  'https://www.tdsay.cn/tools',
  'https://www.tdsay.cn/blog'
];

const qrCodes = await generateBatchQRCode(qrData);

7.3 QR Code Data Formats

QR codes support multiple data formats:

7.4 Common Issues and Debugging

VIII. Comparison of QR Code Types

Characteristics of different types of QR codes:

IX. Using TudoSi Tools to Generate QR Codes

TudoSi Tools provides powerful QR code generation and decoding features:

• Support generating QR codes with various content
• Support custom colors and sizes
• Support adding Logo
• Support QR code decoding

Use QR Code Generator Now

Use QR Code Decoder Now

X. Summary

QR code is an efficient data encoding method widely used in all aspects of life. Understanding its principles and generation methods can help you better utilize this technology. TudoSi Tools' QR code features can meet all your needs.