当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript生成二维码教程详解

JavaScript生成二维码教程详解

2025-10-15 19:30:28 0浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JavaScript生成解析二维码教程》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

JavaScript可通过qrcode.js生成二维码，jsQR实现实时扫描解析，ZXing用于解析图片文件中的二维码，三者分别适用于网页生成、摄像头扫码和上传图片识别场景。

怎样使用JavaScript生成和解析二维码？

JavaScript 可以通过第三方库轻松实现二维码的生成与解析。目前在浏览器和 Node.js 环境中都有成熟的支持方案，主要依赖 qrcode.js 用于生成，jsQR 或 ZXing 用于解析。

使用 qrcode.js 生成二维码

qrcode.js 是一个轻量级的库，适合在网页中将文本、链接等内容转换为二维码图像。

安装方式（Node.js 或构建工具）：

npm install qrcode

浏览器直接引入方式：

<script src="https://cdn.jsdelivr.net/npm/qrcode.js/lib/qrcode.min.js"></script>

基本使用示例（在页面中生成二维码）：

<div id="qrcode"></div>
<script>
  new QRCode(document.getElementById("qrcode"), "https://example.com");
</script>

可配置参数如大小、颜色、容错级别：

const qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "Hello, World!",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
});

使用 jsQR 解析二维码

jsQR 是一个纯 JavaScript 的二维码解码库，适用于从图像或视频流中读取二维码内容，常用于扫码功能。

浏览器引入方式：

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>

使用流程通常包括：获取图像数据（来自 canvas 或 video），调用 jsQR 解码。

示例：从摄像头读取二维码

<video id="video" width="300" height="300" autoplay></video>
<canvas id="canvas" style="display: none;"></canvas>

<script>
  const video = document.getElementById("video");
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
    .then(stream => {
      video.srcObject = stream;
      setTimeout(scan, 500); // 延迟开始扫描
    });

  function scan() {
    if (video.readyState === video.HAVE_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>

使用 ZXing 进行图像文件解析

ZXing 的 JavaScript 版本也支持从图片文件中解析二维码，适合上传图片后读取场景。

引入方式：

<script src="https://unpkg.com/@zxing/library@latest/distribution/index.min.js"></script>

示例：上传图片并解析二维码

&lt;input type=&quot;file&quot; id=&quot;fileInput&quot; /&gt;
<img id="image" />

<script>
  const codeReader = new ZXing.BrowserQRCodeReader();

  document.getElementById("fileInput").addEventListener("change", async (e) => {
    const file = e.target.files[0];
    const img = document.getElementById("image");
    img.src = URL.createObjectURL(file);

    img.onload = async () => {
      try {
        const result = await codeReader.decodeFromImageElement(img);
        console.log("解析结果:", result.text);
        alert("内容: " + result.text);
      } catch (err) {
        console.error("解析失败:", err);
        alert("未检测到二维码");
      }
    };
  });
</script>

基本上就这些。生成用 qrcode.js，实时扫描用 jsQR，文件解析可用 ZXing。根据实际场景选择合适的方法即可。注意权限处理（如摄像头访问）和兼容性测试。不复杂但容易忽略细节。

今天关于《JavaScript生成二维码教程详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！