如何用JavaScript生成和读取二维码？-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-12-20 12:55:02

原创

628人浏览过

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

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

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

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

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

引入脚本：
准备一个容器（如 <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 是目前最稳定的选择：

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

注意事项和常见问题

实际使用中容易踩坑：

bee餐饮点餐外卖小程序

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