QR Scanner 使用指南
简介 qr-scanner 是一款纯前端、零依赖的 JavaScript 二维码扫描库，完全在浏览器端运行，无需后端配合。它同时支持： 摄像头实时扫码 静态图片/文件离线扫码（支持 <img>、<canvas>、<video>、File、Blob 等多种来源） 底层使用 WebAssembly 加速解码，识别速度快、准确率高，在手机端表现尤为优秀，是目前最推荐的前端二维码扫描方案 本文以 React + Next.js 框架为例 1. 安装 npm install qr-scanner 或使用 yarn： yarn add qr-scanner 注意：已不再推荐直接用 <script> 标签引入，现代项目请通过包管理器安装 2. 基本引入方式 import QrScanner from 'qr-scanner'; 3. 核心类：QrScanner 3.1 摄像头实时扫码 const videoElement = document.getElementById('video') as HTMLVideoElement; const scanner = new QrScanner( videoElement, (result) => { console.log('扫码成功:', result.data); // result.cornerPoints 可用来做边框动画 }, { returnDetailedScanResult: true, // 返回完整对象而非仅字符串 highlightScanRegion: true, // 显示扫描区域遮罩 highlightCodeOutline: true, // 高亮二维码轮廓 } ); // 启动摄像头 await scanner.start(); // 停止扫描 scanner.stop(); 常用配置项 参数 说明 returnDetailedScanResult true 时返回 { data, cornerPoints } 对象 highlightScanRegion 显示半透明扫描区域框 highlightCodeOutline 实时绘制二维码四角轮廓 3.2 离线扫描图片文件 const file: File = 文件输入框.files[0]; const result = await QrScanner.scanImage(file, { returnDetailedScanResult: true }); console.log('二维码内容:', result.data); 支持所有图片源：File、Blob、HTMLImageElement、HTMLCanvasElement、URL 等 ...