BarcodeDetector

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全上下文: 此项功能仅在一些支持的浏览器安全上下文(HTTPS)中可用。

备注: 此特性在 Web Worker 中可用。

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

Barcode Detection APIBarcodeDetector 接口允许检测图像中的条形码和二维码。

构造方法

BarcodeDetector.BarcodeDetector() 实验性

使用可选的 BarcodeDetectorOptions 参数创建并返回一个 BarcodeDetector 对象。

静态方法

getSupportedFormats() 实验性

返回一个 Promise,它兑现一个 Array,包含受支持的条形码格式类型

实例方法

detect() 实验性

返回一个 Promise,它兑现一个具有以下属性的 DetectedBarcode 对象数组:

  • boundingBox: 一个 DOMRectReadOnly,返回表示检测到的条形码范围的矩形尺寸,与图像对齐。
  • cornerPoints:检测到的条形码的四个角点相对于图像的 x 和 y 坐标,从左上角开始顺时针旋转。由于图像内的透视变形,这可能不是方形的。
  • format:检测到的条形码格式。(有关格式的完整列表,请参阅受支持的条形码格式类型
  • rawValue:一个从条形码数据解码的字符串。

示例

创建检测器

此示例测试浏览器兼容性并使用指定的支持格式创建新的条形码检测器对象。

js
// 检查兼容性
if (!("BarcodeDetector" in globalThis)) {
  console.log("此浏览器不支持条形码检测器。");
} else {
  console.log("条形码检测器是支持的!");

  // 创建新检测器
  const barcodeDetector = new BarcodeDetector({
    formats: ["code_39", "codabar", "ean_13"],
  });
}

获取支持的格式

以下示例调用 getSupportedFormats() 方法并将结果在控制台打印。

js
// 检查支持的类型
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});

检测条形码

此示例使用 detect() 方法来检测给定图像中的条形码。识别结果被迭代并且条形码数据在控制台打印。

js
barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawValue));
  })
  .catch((err) => {
    console.log(err);
  });

规范

Specification
Accelerated Shape Detection in Images
# barcode-detection-api

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
BarcodeDetector
Experimental
BarcodeDetector() constructor
Experimental
detect
Experimental
getSupportedFormats() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

参见