Barcode Detection API 条码检测

Barcode Detection API（Shape Detection API/Chrome）：BarcodeDetector.detect()识别QR码/Code128/EAN-13/Data Matrix等格式、Canvas/ImageBitmap作为输入、移动端扫码应用 · 难度：入门 · +10XP

Barcode Detection API —— 浏览器原生扫码

不用任何第三方库！Chrome内置的Barcode Detection API可以直接识别二维码和条形码。

基本用法

const barcodeDetector = new BarcodeDetector({
  formats: ['qr_code', 'ean_13', 'code_128']
});
const barcodes = await barcodeDetector.detect(imageElement);
barcodes.forEach(barcode => {
  console.log('识别到：', barcode.rawValue);
  console.log('位置：', barcode.boundingBox);
});

动手练习

1. 基础练习：用BarcodeDetector识别页面中的二维码图片。
2. 进阶应用：结合摄像头实时扫码——摄像头画面→Canvas→BarcodeDetector。
3. 项目实战：做一个扫码签到系统——扫描二维码自动填写信息。