QR Code (Quick Response Code) is a two-dimensional barcode that can store large amounts of data and is easily scanned. From payment codes to business cards, QR codes have become indispensable in daily life. This article explores QR code principles, generation methods and applications.

1. 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 the binary data into black and white modules in the matrix through specific encoding modes. QR codes include positioning 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) Positioning 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 angle 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) Mask processing: apply mask patterns to optimize QR code readability; 5) Format and version information: add format and version information.

2. QR Code Capacity

QR code capacity depends on version and error correction level:

3. Error Correction Levels

QR codes have powerful error correction capabilities:

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

4. JavaScript QR Code Generation

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 Styling

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
});

// Manually draw logo
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);
};

5. 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

// Collection code
https://qr.alipay.com/xxxx

5.2 Information Sharing

Share links, business cards, etc.:

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

// vCard business card
BEGIN:VCARD
VERSION:3.0
N:Zhang San
FN:Zhang San
TEL:13800138000
EMAIL:zhangsan@example.com
END:VCARD

5.3 Logistics Tracking

QR codes on shipping labels:

// Tracking number
SF1234567890

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

6. Security Considerations

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

7. Advanced Techniques

7.1 QR Code Decoding

Decode 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('Location:', 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

Generate 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

8. QR Code Type Comparison

Characteristics of different QR code types:

9. Using Tudousi Tools for QR Codes

Tudousi Tools provides powerful QR code generation and decoding features:

• Supports generating QR codes for various content
• Supports custom colors and sizes
• Supports adding logos
• Supports QR code decoding

Use QR Code Generator Now

Use QR Code Decoder Now

10. Summary

QR codes are an efficient data encoding method, widely used in various aspects of life. Understanding their principles and generation methods helps you better utilize this technology. Tudousi Tools' QR code features can meet all your needs.