JavaScript_二维码生成与识别技术

betcha 2025-11-17 00:00:00 次阅读

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");

你也可以自定义颜色、尺寸、容错等级等参数，满足不同设计需求。

二维码识别（QR Code Scanning）

识别二维码通常需要调用设备摄像头，然后实时分析视频流中的图像信息。目前主流方案是使用 jsQR 或 zxing-js 这类基于Web的解码库。

实现流程如下：

请求用户授权访问摄像头
将视频流显示在
用 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);
}