如何用JavaScript生成和读取二维码？

JavaScript生成二维码推荐qrcode.js，几行代码即可渲染并支持自定义；读取推荐jsQR，需结合视频流与canvas截帧分析，注意环境限制与性能优化。

用 JavaScript 生成和读取二维码，核心是借助成熟的开源库：生成常用 qrcode.js（或 qrcode-generator），读取推荐 jsQR。浏览器端即可完成，无需后端参与。

生成二维码：几行代码搞定

以轻量、无依赖的 qrcode.js 为例：

• 引入脚本：
• 准备一个容器（如 ）
• 调用 QRCode(document.getElementById("qrcode"), "https://example.com") 即可渲染
• 支持自定义宽高、颜色、纠错等级等，例如：
  

  QRCode(document.getElementById("qrcode"), {
  
      text: "Hello",
  
      width: 200,
  
      height: 200,
  
      colorDark: "#333",
  
      colorLight: "#fff",
  
      correctLevel: QRCode.CorrectLevel.H
  
    })

读取二维码：用摄像头实时扫码

读取需结合视频流 + 图像分析，jsQR 是目前最稳定的选择：

• 引入：
• 获取视频流（navigator.mediaDevices.getUserMedia({ video: true })），绑定到 元素
• 用 requestAnimationFrame 持续截取视频帧（canvas.getContext('2d').drawImage(video, ...)）
• 将 canvas 的图像数据转为 Uint8ClampedArray，传给 jsQR(...)
• 若返回结果（result?.data），说明识别成功，可停止循环或触发回调

注意事项和常见问题

实际使用中容易踩坑：

• 读取时确保视频已播放且画面清晰——自动对焦、光线不足、二维码过小/模糊都会失败
• jsQR 只处理灰度图像，输入尺寸建议控制在 300–600px 宽，太大影响性能，太小丢失细节
• 生成的二维码若含中文，确保编码为 UTF-8；部分旧库不支持，建议用 qrcode.js（内部已处理）
• 移动端需在 HTTPS 环境下才能启用摄像头（本地 localhost 也允许）
• 不想自己写视频流逻辑？可用封装好的库如 quaggaJS（功能强但较重）或 @yudiel/react-qr-reader（React 专用）

基本上就这些。生成简单直接，读取稍需耐心调试视频流和采样节奏。选对库、注意环境限制，几分钟就能跑通全流程。