如何在浏览器扩展中通过屏幕截图完成QR码识别（无需摄像头）

本文介绍如何基于 javascript 开发 chrome/firefox 扩展，从网页屏幕区域截取 qr 码图像并解析其内容，核心流程包括 dom 定位、canvas 截图、图像预处理与 qr 解码库调用。

本文介绍如何基于 javascript 开发 chrome/firefox 扩展，从网页屏幕区域截取 qr 码图像并解析其内容，核心流程包括 dom 定位、canvas 截图、图像预处理与 qr 解码库调用。

要实现“屏幕内 QR 码识别”（即不调用摄像头，而是从当前网页中识别已渲染的 QR 图像），关键在于将视觉识别任务拆解为四个协同环节：定位 → 截图 → 编码 → 解析。整个流程完全可在纯 JS 环境下完成，无需后端或原生模块。

1. 定位 QR 码区域（Content Script）

首先需让内容脚本（content.js）在页面中智能发现 QR 码元素。常见策略包括：

• 检测 <img> 标签的 src 是否包含 base64 编码的 QR 图像（如 data:image/png;base64,...）；
• 查找具有特定 class（如 qr-code, qrcode-img）或 alt/title 含 “QR” 关键字的图片或 canvas 元素；
• 使用 document.querySelectorAll('img, canvas, svg') 遍历后结合 getBoundingClientRect() 获取可视区域坐标。

定位完成后，通过 chrome.runtime.sendMessage 将目标元素的 left, top, width, height, ownerDocument.defaultView.devicePixelRatio 等信息发送至后台页，确保高分屏截图精度。

2. 截图与图像标准化（Background Script）

后台脚本（background.js）收到坐标后，创建临时 <canvas> 并调用 drawImage() 截取指定区域：

function captureQRRect({ left, top, width, height, dpr = 1 }) {  const canvas = document.createElement('canvas');  const ctx = canvas.getContext('2d');  canvas.width = width * dpr;  canvas.height = height * dpr;  ctx.scale(dpr, dpr);  // 注意：需先将目标元素所属页面的 document 转为可绘制源（如通过 offscreen canvas 或跨域处理）  // 实际中常借助 chrome.tabs.captureVisibleTab 或临时注入 canvas 绘制逻辑  // 更稳妥方式：在 content script 中完成 drawImage 并返回 imageData}

⚠️ 注意事项：

• 直接跨域读取第三方网站图片像素会触发 CORS 限制；推荐在 content script 中完成截图并返回 ImageData 或 dataURL；
• 若 QR 码由 SVG 渲染，需先 rasterize（转为 bitmap）——可将其注入隐藏 <foreignObject> 或用 canvg 库转换。

3. 解析 QR 数据（使用轻量级解码库）

推荐两个成熟、无依赖的纯 JS QR 解码器：

• jsQR（推荐首选）：支持 ES Module，API 简洁，对模糊/旋转/低对比度图像鲁棒性较强；
• qrcode-reader（较老但兼容性好）：需注意其 decode() 方法接收 Uint8ClampedArray 格式的灰度图像数据。

示例解码逻辑（后台页中）：

import { decode } from 'jsqr';// 假设已从 content script 获取到 dataURLasync function parseQRFromDataURL(dataURL) {  const img = await createImageBitmap(await fetch(dataURL).then(r => r.blob()));  const canvas = new OffscreenCanvas(img.width, img.height);  const ctx = canvas.getContext('2d');  ctx.drawImage(img, 0, 0);  const code = decode(ctx.getImageData(0, 0, canvas.width, canvas.height));  return code?.data || null;}

4. 容错与降级策略

生产环境建议加入 fallback 流程：

• 若 jsQR 返回 null，尝试缩放图像（2×/0.5×）后重试；
• 对灰度图做二值化增强（Otsu 算法或简单阈值）；
• 当检测失败时，提示用户手动框选区域（可集成 html2canvas + 自定义 selection UI）。

✅ 总结：起点不必复杂——先在 content script 中 querySelector 一个已知 QR 图片，用 canvas.drawImage(img, ...) 截图，转成 dataURL 后传给后台，再用 jsQR.decode() 解析。跑通这一最小闭环，即可逐步扩展自动检测与多格式兼容能力。