JavaScript可通过qrcode.js生成二维码，并利用jsQR调用摄像头实时扫描，结合Canvas解码，实现网页端扫码功能，适用于登录、核验等场景，需注意HTTPS权限限制。
二维码生成与识别在现代Web应用中越来越常见，JavaScript凭借其强大的浏览器支持和丰富的第三方库，能够轻松实现这些功能。通过前端技术直接在浏览器中生成和读取二维码，提升了用户体验，减少了对服务器的依赖。
二维码生成（QR Code Generation）
使用JavaScript生成二维码，最常用的库是 qrcode.js 或 qrcode-generator。它们轻量、无依赖，适合在网页中快速集成。
基本使用步骤：- 引入库文件（可通过CDN或npm安装）
- 指定页面中的DOM元素作为二维码容器
- 调用生成方法，传入文本内容
示例代码：
// 使用 qrcode.js
const qrcode = new QRCode(document.getElementById("qrcode"), {
width: 200,
height: 200
});
qrcode.makeCode("https://example.com");
你也可以自定义颜色、尺寸、容错等级等参数，满足不同设计需求。
立即学习“Java免费学习笔记（深入）”；
二维码识别（QR Code Scanning）
识别二维码通常需要调用设备摄像头，然后实时分析视频流中的图像信息。目前主流方案是使用 jsQR 或 zxing-js 这类基于Web的解码库。
实现流程如下：- 请求用户授权访问摄像头
- 将视频流显示在 <video> 标签中
- 用 <canvas> 捕获帧图像
- 通过 jsQR 解码图像中的二维码
示例代码片段：
const video = document.createElement("video");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(stream => {
video.srcObject = stream;
video.setAttribute("playsinline", true);
video.play();
requestAnimationFrame(tick);
});
function tick() {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
console.log("识别结果:", code.data);
}
}
requestAnimationFrame(tick);
}
注意：为了安全限制，调用摄像头需在HTTPS环境下运行，本地开发可使用 localhost 豁免。
实际应用场景
这类技术广泛用于网页版扫码登录、电子票核验、产品溯源、线下导流等场景。例如，用户打开网页点击“扫码”按钮，即可用前置摄像头扫描登录二维码，无需跳转App。
结合后端接口，还能实现动态内容展示，比如扫描后获取订单状态或跳转个性化页面。
基本上就这些，不复杂但容易忽略细节。
