barcode detection api仅支持imagebitmap等四类图像源，需将dom图片加载完成、跨域设置后绘制到canvas再转为imagebitmap；检测返回promise，含rawvalue、format和boundingbox；仅chromium支持，需兜底jsqr等方案。
Barcode Detection API 本身不支持直接解析 DOM 中的 <img> 或其他静态图片元素——它只接受 ImageBitmap、HTMLCanvasElement、OffscreenCanvas 或 VideoFrame 这四类可绘制图像源。想用它处理页面上的图片，必须先把图片“画进” canvas，再转成 ImageBitmap 才能传给 detect()。
把 DOM 图片转成可检测的 ImageBitmap
核心是绕过跨域限制、确保图片加载完成、并正确绘制到 canvas：
- 先检查图片是否已加载：
img.complete === true，否则监听load事件 - 若图片来自跨域地址（如 CDN），需设置
img.crossOrigin = 'anonymous'，否则 drawImage 会触发 canvas 污染，后续 detect 报错 - 创建 canvas，宽高设为图片自然尺寸（
img.naturalWidth/img.naturalHeight），避免拉伸失真 - 用
ctx.drawImage(img, 0, 0)绘制后，调用canvas.transferToImageBitmap()获取 ImageBitmap（推荐）；或用createImageBitmap(canvas)（兼容性稍好）
调用 BarcodeDetector.detect() 并处理结果
构造检测器时指定需要的格式（比如 ['ean_13', 'code_128', 'qr_code']），再传入 ImageBitmap：
- 检测是异步操作，返回 Promise，需用
await detector.detect(bitmap) - 成功时返回数组，每项含
rawValue（解码内容）、format（如"qr_code"）、boundingBox（相对 canvas 左上角的矩形） - 若返回空数组，不代表失败，只是没识别到——常见原因包括条码太小（建议最小宽度 ≥ 100px）、模糊、倾斜超 15°、或对比度不足
兼容性兜底与实用建议
该 API 仅 Chromium 内核浏览器（Chrome 87+ / Edge 87+ / Opera 73+）稳定支持，Safari 和 Firefox 明确不实现。务必先检测：
- 运行
'BarcodeDetector' in window，为 false 就跳过，改用jsQR或html5-qrcode等纯 JS 方案 - 对单张图检测一次即可，无需节流；但若批量处理多图，建议加
Promise.allSettled()控制并发 - 检测前可对 canvas 内容做简单预处理：转灰度、增强对比度（用
ctx.filter = 'contrast(1.5)'），对低质量截图有帮助
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
