浏览器使用Barcode Detection API异步解析DOM图片条形码

如果您希望在浏览器端直接识别图片中的条形码，Barcode Detection API 是一种前沿且功能强大的解决方案。然而，它并非完全“即插即用”，需要先掌握其运行机制，才能高效应用。

需要明确的是，Barcode Detection API 无法直接解析页面中的 标签。它仅支持四类“可绘制”图像源：ImageBitmap、HTMLCanvasElement、OffscreenCanvas 和 VideoFrame。因此，我们的关键步骤是将静态图片“转换”为这些兼容格式。

把 DOM 图片转成可检测的 ImageBitmap

这个过程有几个关键点，处理不当就容易遇到问题。核心思路是：确保图片加载完毕、绕过跨域限制、然后绘制到画布上。

• 等待图片就绪：首先判断 img.complete === true，若为 false，则需监听图片的 load 事件，否则 canvas 可能为空，导致检测失败。
• 处理跨域问题：当图片来源于其他域名（如 CDN）时，务必设置 img.crossOrigin = 'anonymous'。此步骤至关重要，否则在 canvas 上绘制时会触发跨域“污染”，导致 API 抛出错误。
• 创建合适尺寸的画布：新建 canvas 时，宽度和高度应设置为图片的自然尺寸（img.naturalWidth 和 img.naturalHeight），以避免图像拉伸变形，从而影响条码识别精度。
• 绘制与转换：使用 ctx.drawImage(img, 0, 0) 将图片绘制到 canvas 后，推荐采用 canvas.transferToImageBitmap() 获取 ImageBitmap。如需更广泛的浏览器兼容，createImageBitmap(canvas) 也是可行的替代方案。

调用 BarcodeDetector.detect() 并处理结果

准备好 ImageBitmap 后，调用过程就变得直观了。首先需要实例化检测器，并指定要识别的码制，例如 ['ean_13', 'code_128', 'qr_code']。

• 异步检测：detect() 方法返回一个 Promise 对象，通常配合 await detector.detect(bitmap) 进行异步调用。
• 理解返回值：成功时返回一个数组，其中每个元素包含解码后的字符串（rawValue）、识别的码制（format，如 "qr_code"），以及条码在图像中的边界框信息（boundingBox）。
• 空数组不等于失败：如果返回空数组，并不表示程序出错，而是 API 在当前图片中未识别到任何符合条件的条码。常见原因包括条码尺寸过小（建议有效宽度不低于 100 像素）、图像模糊、倾斜角度过大（超过 15°），或者背景与条码对比度不足。

兼容性兜底与实用建议

需要说明的是，该 API 目前主要受 Chromium 内核的浏览器支持（Chrome 87+、Edge 87+、Opera 73+），Safari 和 Firefox 暂无实现计划。因此，在实际生产环境中必须做好兼容性处理。

• 特性检测先行：在使用之前，务必通过 'BarcodeDetector' in window 进行特性检测。如果不存在，应立即回退到纯 JavaScript 方案，例如 jsQR 或 html5-qrcode 等第三方库。
• 性能与预处理：对于单张图片，直接检测即可，无需额外节流。但如果需要批量处理大量图片，建议使用 Promise.allSettled() 控制并发，避免阻塞主线程。此外，在检测前可以对 canvas 内容进行简单预处理，例如转换为灰度图，或使用 ctx.filter = 'contrast(1.5)' 增强对比度，这对于提升低质量截图或照片的识别率往往效果显著。