二维码（QR Code）是一种二维条码，它可以存储大量数据，并且易于扫描识别。从支付码到名片，二维码已经成为日常生活中不可或缺的一部分。QR Code 由日本 Denso Wave 公司于 1994 年发明，最初用于汽车零部件的追踪管理。本文深入探讨二维码的原理、生成方法和应用场景。

一、二维码原理

QR Code（Quick Response Code）采用矩阵式编码，通过黑白像素的排列来表示数据。二维码的核心是将数据编码为二进制，然后通过特定的编码模式将二进制数据转换为矩阵中的黑白模块。二维码包含定位图案、对齐图案和数据区域，这些结构使得二维码能够被快速准确地识别。

结构组成

二维码主要由以下几个部分组成：1）定位图案：位于左上角、右上角和左下角的回字形图案，用于确定二维码的位置和方向；2）对齐图案：用于校正扫描时的角度偏差；3）数据区域：存储实际编码的数据；4）纠错区域：存储冗余数据，用于恢复损坏或模糊的部分；5）版本信息：表示二维码的大小和容量。

编码过程

二维码的编码过程分为几个步骤：1）数据编码：将输入数据转换为二进制流，根据数据类型选择合适的编码模式（数字、字母数字、二进制、汉字等）；2）纠错编码：添加纠错码以提高容错能力；3）结构编码：将数据和纠错码排列到矩阵中；4）掩模处理：应用掩模图案优化二维码的可读性；5）格式和版本信息：添加格式和版本信息。

二、二维码容量

二维码的容量取决于版本和纠错级别：

三、纠错级别

二维码具有强大的纠错能力：

• L 级：可恢复约 7% 的数据
• M 级：可恢复约 15% 的数据
• Q 级：可恢复约 25% 的数据
• H 级：可恢复约 30% 的数据

四、JavaScript 生成二维码

4.1 基础生成

// 使用 qrcode.js 库
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 自定义样式

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

4.3 添加 Logo

await QRCode.toCanvas(canvas, text, {
  width: 200,
  margin: 2,
  errorCorrectionLevel: 'H' // 需要高纠错级别
});

// 手动绘制 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.1 移动支付

扫码支付是最常见的应用：

// 支付码数据格式
weixin://pay?appid=xxx&mch_id=xxx&prepay_id=xxx

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

5.2 信息分享

分享链接、名片等：

// 网站链接
https://www.tdsay.cn

// vCard 名片
BEGIN:VCARD
VERSION:3.0
N:张三
FN:张三
TEL:13800138000
EMAIL:zhangsan@example.com
END:VCARD

5.3 物流追踪

快递单上的二维码：

// 运单号
SF1234567890

// 完整查询链接
https://www.sf-express.com/sf-service/web/index.html?searchType=1&searchValue=SF1234567890

六、安全注意事项

• 不要随意扫描不明来源的二维码
• 扫码前确认二维码内容
• 避免扫描包含恶意链接的二维码
• 使用正规扫码工具

七、高级技巧

7.1 二维码解码

使用 JavaScript 解码二维码：

// 使用 jsQR 库解码
import jsQR from 'jsqr';

function decodeQRCode(imageData) {
  const code = jsQR(imageData.data, imageData.width, imageData.height, {
    inversionAttempts: "dontInvert"
  });
  
  if (code) {
    console.log('二维码内容:', code.data);
    console.log('位置:', code.location);
    return code.data;
  }
  return null;
}

// 从图片解码
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 批量生成二维码

批量生成多个二维码：

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

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

const qrCodes = await generateBatchQRCode(qrData);

7.3 二维码数据格式

二维码支持多种数据格式：

7.4 常见问题与调试

八、二维码类型对比

不同类型二维码的特点：

九、使用土豆丝工具生成二维码

土豆丝工具提供了强大的二维码生成和解码功能：

• 支持生成各种内容的二维码
• 支持自定义颜色和尺寸
• 支持添加 Logo
• 支持二维码解码

立即使用二维码生成工具

立即使用二维码解码工具

十、总结

二维码是一种高效的数据编码方式，广泛应用于生活的各个方面。了解其原理和生成方法，可以帮助你更好地利用这一技术。土豆丝工具的二维码功能可以满足你的各种需求。