jsQR 开源项目教程
项目介绍
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);
});
典型生态项目
前端框架集成
jsQR 可以与各种前端框架集成,如 React、Vue 和 Angular。以下是一个简单的 React 示