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

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

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

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

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

• 引入脚本：<script src="https://<a%20style=" color: text-decoration:underline title="cdn" href="https://www.php.cn/zt/19618.html" target="_blank">cdn.jsdelivr<a style="color:#f60; text-decoration:underline;" title= ".net" href="https://www.php.cn/zt/64958.html" target="_blank">.net/<a style="color:#f60; text-decoration:underline;" title= "npm" href="https://www.php.cn/zt/16096.html" target="_blank">npm/qrcode.js@1.5.1/qrcode.min.js"></script>
• 准备一个容器（如 <div id="qrcode"></div>）
• 调用 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 是目前最稳定的选择：

bee餐饮点餐外卖小程序

bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和 密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置

下载

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

注意事项和常见问题

实际使用中容易踩坑：

立即学习“Java免费学习笔记（深入）”；

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

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