前端项目中如何实现二维码的生成与识别功能

在前端项目中实现二维码的生成与识别，不需要依赖后端服务处理核心逻辑，通过成熟的第三方库就能快速完成相关功能开发，适配多种不同的业务场景。

二维码生成实现方案

前端生成二维码最常用的库是qrcode.js，它可以在浏览器端直接生成二维码图片，支持自定义尺寸、颜色、容错级别等参数，兼容性也比较好。

安装与引入

如果是npm项目，可以通过npm安装依赖：

npm install qrcode

也可以直接在HTML中通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>

基础生成示例

以下代码实现了将指定文本生成二维码并显示在页面上的功能：

// 引入qrcode库后，调用QRCode构造函数生成二维码
// 第一个参数是挂载二维码的DOM容器，第二个参数是配置项
const qrcodeContainer = document.getElementById('qrcode-container');
new QRCode(qrcodeContainer, {
  text: 'https://ipipp.com', // 要编码的内容，支持URL、文本、手机号等
  width: 200, // 二维码宽度
  height: 200, // 二维码高度
  colorDark: '#000000', // 深色模块颜色
  colorLight: '#ffffff', // 浅色模块颜色
  correctLevel: QRCode.CorrectLevel.H // 容错级别，H级别容错率最高
});

动态更新二维码内容

如果需要根据用户输入动态更新二维码，可以调用makeCode方法：

const qrcode = new QRCode(document.getElementById('qrcode-container'), {
  width: 200,
  height: 200
});
// 监听输入框变化，动态更新二维码内容
document.getElementById('input-text').addEventListener('input', function(e) {
  const content = e.target.value;
  if (content) {
    qrcode.makeCode(content);
  }
});

二维码识别实现方案

前端识别二维码可以借助jsQR库，它可以从图片的像素数据中提取二维码信息，支持从本地上传的图片、摄像头实时画面中识别二维码。

安装与引入

npm安装方式：

npm install jsqr

CDN引入方式：

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>

识别本地上传的二维码

以下代码实现了用户上传图片后识别其中二维码的功能：

const fileInput = document.getElementById('file-input');
const resultDiv = document.getElementById('scan-result');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  // 将文件转换为Image对象
  const img = new Image();
  const reader = new FileReader();
  reader.onload = function(event) {
    img.src = event.target.result;
    img.onload = function() {
      // 创建canvas绘制图片，提取像素数据
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      // 获取图片的像素数据
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      // 调用jsQR解析二维码
      const qrCode = jsQR(imageData.data, imageData.width, imageData.height);
      if (qrCode) {
        resultDiv.textContent = '识别结果：' + qrCode.data;
      } else {
        resultDiv.textContent = '未识别到二维码';
      }
    };
  };
  reader.readAsDataURL(file);
});

识别摄像头实时画面中的二维码

如果需要实现扫码功能，可以结合getUserMedia获取摄像头画面，实时识别二维码：

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const scanResult = document.getElementById('scan-result');

// 获取摄像头权限并播放画面
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
  .then(stream => {
    video.srcObject = stream;
    video.play();
    // 启动识别循环
    requestAnimationFrame(scanFrame);
  })
  .catch(err => {
    console.error('获取摄像头失败：', err);
  });

function scanFrame() {
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    // 将视频帧绘制到canvas
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 提取像素数据解析二维码
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const qrCode = jsQR(imageData.data, imageData.width, imageData.height);
    if (qrCode) {
      scanResult.textContent = '识别结果：' + qrCode.data;
      // 识别到结果后可以停止识别
      video.srcObject.getTracks().forEach(track => track.stop());
      return;
    }
  }
  // 未识别到则继续下一帧识别
  requestAnimationFrame(scanFrame);
}

常见问题与注意事项

• 生成二维码时，内容长度不要超过二维码的存储上限，否则会生成失败，一般建议内容控制在几百字符以内。
• 识别二维码时，需要保证图片清晰、二维码没有严重畸变，否则会导致识别失败。
• 使用摄像头识别时，需要注意浏览器兼容性，部分旧版浏览器不支持getUserMediaAPI。
• 如果生成的二维码需要打印或者远距离扫描，建议适当提高二维码的尺寸，选择较高的容错级别。

方案对比

以下是两种常用库的对比，开发者可以根据项目需求选择：

QRCodeJavaScript二维码生成二维码识别前端开发修改时间：2026-06-23 01:51:36