前端二维码生成与识别的JaScript实现_jascript工具

技术教程
2025-11-16 22:44:02

前端可独立实现二维码生成与识别。使用qrcode.js生成二维码，通过引入库、创建容器并调用QRCode构造函数，支持自定义大小、颜色等配置；利用jsQR结合video和canvas实现识别，需获取摄像头视频流、定时提取图像数据并解析，注意需在HTTPS或localhost下运行。优化建议包括添加加载提示、控制识别频率、提供手动输入备选、保留二维码中心留白及优先使用后置摄像头，确保兼容性与体验。

前端二维码生成与识别的javascript实现_javascript工具

前端实现二维码的生成与识别，已经成为许多Web应用的基础功能，比如扫码登录、分享页面、支付入口等。借助成熟的J*aScript库，开发者可以快速在浏览器端完成这些操作，无需依赖后端处理。

二维码生成：使用qrcode.js

qrcode.js 是一个轻量级的J*aScript库，支持在HTML5 Canvas或table结构中绘制二维码。

使用步骤：

引入 qrcode.js 库（可通过CDN）
在页面中创建一个容器用于显示二维码
调用QRCode构造函数生成图像

示例代码：

<div id="qrcode"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcode.js/lib/qrcode.min.js"></script>
<script>
  new QRCode(document.getElementById("qrcode"), "https://example.com");
</script>

你也可以传入配置项来自定义大小、颜色、容错等级等：

new QRCode(document.getElementById("qrcode"), {
  text: "https://example.com",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
});

二维码识别：使用jsQR

jsQR 是一个纯J*aScript实现的二维码解码器，适用于Canvas图像数据，适合结合摄像头实时扫描。

VoxDeck

美间AI推出的演示文稿制作智能体

90 查看详情 VoxDeck

基本流程：

获取视频流并绘制到canvas
定时从canvas提取图像数据
使用jsQR解析二维码内容

示例代码：

<video id="video" autoplay playsinline></video>
<canvas id="canvas" style="display:none;"></canvas>

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script>
  const video = document.getElementById("video");
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  n*igator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
    .then(stream => {
      video.srcObject = stream;
      setTimeout(scan, 500);
    });

  function scan() {
    if (video.readyState === video.H*E_ENOUGH_DATA) {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      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);
        alert("识别到二维码：" + code.data);
      }
    }
    setTimeout(scan, 500);
  }
</script>

注意：出于安全策略，访问摄像头需要在HTTPS环境下运行，或本地开发时使用localhost。