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

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

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

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

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

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

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

  登录后复制

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

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

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

注意事项和常见问题

实际使用中容易踩坑：

标签： react javascript java js npm 编码 浏览器 后端 cdn 常见问题 浏览器端 .net ca