jsQR 开源项目教程

2026-01-16 10:10:47作者：晏闻田Solitary

项目介绍

jsQR 是一个纯 JavaScript 实现的 QR 码读取库。该库能够从原始图像中定位、提取并解析其中的 QR 码。jsQR 设计为完全独立的库，不包含任何平台特定代码，因此它可以轻松地在前端扫描摄像头流、用户上传的图像，或作为后端 Node.js 进程的一部分使用。

项目快速启动

安装

你可以通过 npm 安装 jsQR：

npm install jsqr --save

使用

在 Node.js 项目中，你可以这样引入 jsQR：

// ES6 import
import jsQR from "jsqr";

// CommonJS require
const jsQR = require("jsqr");

在前端项目中，你可以通过 script 标签引入 jsQR：

<script src="jsQR.js"></script>
<script>
  jsQR();
</script>

示例代码

以下是一个简单的示例，展示如何使用 jsQR 扫描 QR 码：

// 假设你已经获取了 ImageData 对象
const imageData = ...; // 从视频流或图像中获取的 ImageData

const code = jsQR(imageData.data, imageData.width, imageData.height);

if (code) {
  console.log("找到 QR 码:", code.data);
} else {
  console.log("未找到 QR 码");
}

应用案例和最佳实践

前端摄像头扫描

在前端项目中，你可以使用 jsQR 扫描用户摄像头的视频流。以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>jsQR 摄像头扫描示例</title>
</head>
<body>
  <video id="video" width="640" height="480" autoplay></video>
  <canvas id="canvas" width="640" height="480"></canvas>
  <script src="jsQR.js"></script>
  <script>
    const video = document.getElementById("video");
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
      .then(stream => {
        video.srcObject = stream;
        video.play();
        requestAnimationFrame(tick);
      })
      .catch(err => {
        console.error("无法访问摄像头", err);
      });

    function tick() {
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height);
        if (code) {
          console.log("找到 QR 码:", code.data);
        }
      }
      requestAnimationFrame(tick);
    }
  </script>
</body>
</html>

后端图像处理

在 Node.js 项目中，你可以使用 jsQR 处理上传的图像文件。以下是一个示例：

const fs = require("fs");
const jimp = require("jimp");
const jsQR = require("jsqr");

jimp.read("path/to/image.png")
  .then(image => {
    const width = image.bitmap.width;
    const height = image.bitmap.height;
    const imageData = image.bitmap.data;
    const code = jsQR(imageData, width, height);
    if (code) {
      console.log("找到 QR 码:", code.data);
    } else {
      console.log("未找到 QR 码");
    }
  })
  .catch(err => {
    console.error("读取图像失败", err);
  });