Files
testing-tool/utils/qrCodeParser.ts
T
雨霖铃 8e920c2a94 feat: 支持右键菜单图片二维码识别
- 在 qrCodeParser.ts 中添加 parseQrCodeFromUrl 函数,支持从图片 URL 解析二维码
- 在 QrCodeToUrlSection 中使用 useContextMenuData 接收右键菜单传递的图片 URL
- 自动下载图片并解析二维码,显示解析结果
2026-05-20 21:19:39 +08:00

59 lines
1.8 KiB
TypeScript

import QrScanner from 'qr-scanner';
export interface QrCodeParseResult {
success: boolean;
data?: string;
error?: string;
}
/**
* 从文件中解析二维码
* 使用 qr-scanner 替代 jsqr 以减小体积并提高性能
*/
export async function parseQrCodeFromFile(file: File): Promise<QrCodeParseResult> {
try {
// qr-scanner 的 scanImage 方法支持直接传入 File 对象
// 它会自动处理图片加载、Canvas 绘制和解析过程
// 并且在支持的浏览器中会优先使用原生的 BarcodeDetector API
const result = await QrScanner.scanImage(file, {
returnDetailedScanResult: true,
});
if (result && result.data) {
return { success: true, data: result.data };
} else {
return { success: false, error: '未检测到二维码' };
}
} catch (err) {
// qr-scanner 在未发现二维码时会抛出 "No QR code found"
const errorMsg =
err === 'No QR code found'
? '未检测到二维码'
: err instanceof Error
? err.message
: String(err);
return { success: false, error: errorMsg };
}
}
/**
* 从图片 URL 解析二维码
* 先下载图片,然后调用 parseQrCodeFromFile
*/
export async function parseQrCodeFromUrl(imageUrl: string): Promise<QrCodeParseResult> {
try {
const response = await fetch(imageUrl);
if (!response.ok) {
return { success: false, error: '无法下载图片' };
}
const blob = await response.blob();
const file = new File([blob], 'qrcode.jpg', { type: blob.type || 'image/jpeg' });
return await parseQrCodeFromFile(file);
} catch (err) {
const errorMsg = err instanceof Error ? err.message : String(err);
return { success: false, error: `下载图片失败: ${errorMsg}` };
}
}