如何用JavaScript在前端实现二维码的生成与识别？

在现代Web应用中，纯前端处理二维码已经成为常见需求。无论是让用户扫码登录，还是把当前页面链接生成二维码分享出去，都可以通过JavaScript在浏览器里直接完成。这样做不仅减少了服务端的压力，也避免了网络往返带来的延迟。本文将从生成、识别以及工程落地三个角度，详细说明如何用JS实现这两类功能。

使用JavaScript生成二维码的原理与实现

二维码本质上是一种按特定规则排列的黑白矩阵，它把输入数据经过编码、纠错计算后映射为模块颜色。前端生成二维码的常用做法是引入qrcode这个库，它内部实现了ISO 18004标准中的编码流程，并支持把结果绘制到canvas或者img元素上。开发者只需要提供内容和配置项，就能拿到可直接展示的图像。

下面是一段最基础的生成代码，把一段文本变成canvas里的二维码。我们故意把纠错级别设为H，这样即使图片被遮挡一部分也还能扫出来。注意在浏览器里调用时，目标节点必须已经存在于DOM中，否则库会报错。

import QRCode from 'qrcode';

const canvas = document.getElementById('qr');
const text = 'https://ipipp.com/demo';

QRCode.toCanvas(canvas, text, {
  errorCorrectionLevel: 'H',
  width: 240,
  margin: 2
}, function (err) {
  if (err) console.error('生成失败', err);
});

如果项目不允许使用构建工具，也可以直接用UMD版本的script引入，然后调用QRCode.toDataURL拿到base64图片。这种方案更适合老系统嵌入。不过要留意，当内容非常长时，二维码密度会变高，手机摄像头识别率会下降，此时应当适当增大尺寸或缩短文本。

除了第三方库，也有开发者尝试用原生方式手绘，但那样要自己处理 Reed-Solomon 纠错算法，工作量极大且容易出bug。因此在中后台项目里，直接依赖成熟库是更稳妥的选择。生成环节的核心痛点其实是样式定制，比如想让二维码中间带logo，就需要在canvas绘制完成后再用drawImage叠加，并保证留足静区。

前端识别二维码的摄像头与图片方案

识别比生成更依赖环境能力。浏览器中主要通过getUserMedia拿到摄像头流，再把每一帧交给jsQR这类解码库分析。jsQR接收的是一维数组格式的像素数据，所以我们要用canvas的getImageData提取出RGBA值，再传给它。整个过程是同步计算，如果分辨率太高会造成卡顿，一般建议把视频缩放到400像素以内再识别。

下面的示例展示了如何打开摄像头并循环解码。为了在移动端兼容，我们显式请求后置摄像头，并用requestAnimationFrame控制节奏。当识别成功后就停止循环，避免重复触发。

import jsQR from 'jsqr';

const video = document.getElementById('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({
  video: { facingMode: 'environment' }
}).then(stream => {
  video.srcObject = stream;
  video.play();
  tick();
});

function tick() {
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0);
    const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const code = jsQR(img.data, img.width, img.height);
    if (code) {
      console.log('扫到内容', code.data);
      return;
    }
  }
  requestAnimationFrame(tick);
}

如果不想开摄像头，也可以让用户上传图片来识别。此时要注意canvas读取图片可能遇到跨域污染，如果图来自其他域且没设CORS头，getImageData会抛异常。解决办法是让图片服务器返回正确头部，或者把用户本地选择的文件用FileReader转成dataURL再绘制，这样完全在本地不会跨域。

识别准确率受光线和对焦影响很大。实践中我们发现，在弱光下可以先对图像做灰度化并提升对比度，再交给jsQR，成功率会提高。另外ios的safari在iframe里禁用了摄像头，所以涉及识别的功能最好放在顶级页面，或者用按钮明确由用户手势触发权限申请。

工程化落地与常见坑排查

把生成和识别放进真实项目时，首先要考虑打包体积。qrcode和jsQR加一起大约增加百KB级资源，如果只用生成，就只装前者并用按需引入。识别功能若仅活动页使用，建议做成异步懒加载组件，等用户点开扫码弹窗再动态import，避免拖慢首屏。

权限与隐私是另一道坎。摄像头属于敏感能力，必须在https或localhost下才能调用。本地开发用127.0.0.1没问题，但部署到测试域名若没配证书，getUserMedia会直接拒绝。我们在排查时曾遇到同事用公司内网http地址调试，一直报NotFoundError，换成https后立即正常。

<div id="scan-modal">
  <video id="video" playsinline></video>
  <canvas id="qr"></canvas>
  <button id="start">开始扫码</button>
</div>

上面这段结构里，video必须加playsinline属性，否则iOS会强制全屏播放并中断我们的逐帧读取。很多教程漏掉这点，导致真机调试时画面跳走。识别到结果后，应当用track.stop()关闭摄像头轨道，否则摄像头灯常亮会让用户不安。

最后是异常处理与降级。当浏览器不支持相关API时，要给出上传图片的替代入口，或者引导到原生App。我们通常在初始化前用typeof navigator.mediaDevices判断，不支持就隐藏视频区域。这样纯JS方案就能在多数环境下平稳运行，既服务了主流用户，也不至于在老设备上白屏。

JavaScript二维码生成二维码识别修改时间：2026-08-13 22:30:30