当前位置：首页 > 文章列表 > 文章 > 前端 > JS生成二维码技巧与使用方法

JS生成二维码技巧与使用方法

2026-01-16 14:10:49 0浏览收藏

golang学习网今天将给大家带来《JS生成二维码技巧与识别方法》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

使用qrcode.js生成二维码，jsQR识别二维码，结合两者可在前端实现二维码的生成与识别，提升用户体验。通过引入库文件，操作DOM或canvas完成生成与解码，支持动态更新内容及从图片、摄像头实时扫描，需注意环境安全与图像处理细节。

JS实现前端二维码生成与识别_javascript技巧

前端实现二维码的生成与识别，能提升用户体验，减少对后端的依赖。通过 JavaScript 可以轻松完成这两项功能，无需跳转或上传图片，直接在浏览器中完成操作。

使用 qrcode.js 生成二维码

qrcode.js 是一个轻量级的库，用于将文本内容转换为二维码图像。

使用步骤：

引入 qrcode.js 库（可通过 CDN 或 npm 安装）
创建一个 DOM 容器用于放置生成的二维码
调用 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"), {
    text: "https://example.com",
    width: 128,
    height: 128
  });
</script>

你也可以动态更新二维码内容，比如用户输入一段文字实时生成。

使用 jsQR 实现二维码识别

jsQR 是一个纯 JavaScript 的二维码扫描库，可在 canvas 上解析图像中的二维码。

实现逻辑：

获取图像或视频流数据（如 file input 或摄像头）
绘制到 canvas 获取 imageData
用 jsQR 解码 imageData

从文件识别二维码示例：

&lt;input type=&quot;file&quot; id=&quot;qr-input&quot; accept=&quot;image/*&quot;&gt;
<canvas id="canvas" style="display:none;"></canvas>

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script>
document.getElementById("qr-input").addEventListener("change", function(e) {
  const file = e.target.files[0];
  const img = new Image();
  img.onload = function() {
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const code = jsQR(data.data, data.width, data.height);
    if (code) {
      alert("识别结果：" + code.data);
    } else {
      alert("未识别到二维码");
    }
  };
  img.src = URL.createObjectURL(file);
});
</script>

结合摄像头实时扫码（进阶）

通过调用 getUserMedia 获取摄像头视频流，配合 jsQR 实现实时扫码功能。

请求摄像头权限并播放视频
定时从视频帧提取图像数据
使用 jsQR 解码，成功则停止并返回结果

简要实现：

<video id="video" autoplay playsinline></video>
<script>
const video = document.getElementById("video");
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
  .then(stream => {
    video.srcObject = stream;
    setTimeout(scan, 500); // 延迟启动识别
  });

function scan() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.drawImage(video, 0, 0);
  const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const code = jsQR(data.data, data.width, data.height);

  if (code) {
    alert("扫码结果：" + code.data);
  } else {
    setTimeout(scan, 500); // 继续下一帧
  }
}
</script>

注意：摄像头功能需在 HTTPS 或本地环境下运行，且用户授权。

基本上就这些。生成用 qrcode.js，识别用 jsQR，两者结合即可实现完整的前端二维码处理能力。不复杂但容易忽略细节，比如 canvas 尺寸、跨域图像、异步加载等。合理封装后可复用性强。

本篇关于《JS生成二维码技巧与使用方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

二维码