条形码检测器

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在部分或所有支持的浏览器中可用。

注意：此功能在Web Workers中可用。

实验性：这是实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

条形码检测 API的BarcodeDetector 接口允许检测图像中的线性条形码和二维条形码。

构造函数

BarcodeDetector.BarcodeDetector()

创建并返回一个 BarcodeDetector 对象，并具有可选的 BarcodeDetectorOptions。

静态方法

getSupportedFormats()

返回一个Promise，该承诺将以支持的条形码格式类型的Array形式完成。

实例方法

detect()

返回一个Promise，该承诺将以包含以下属性的 DetectedBarcode 对象数组形式完成

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

示例

创建检测器

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

js
// check compatibility
if (!("BarcodeDetector" in globalThis)) {
  console.log("Barcode Detector is not supported by this browser.");
} else {
  console.log("Barcode Detector supported!");

  // create new detector
  const barcodeDetector = new BarcodeDetector({
    formats: ["code_39", "codabar", "ean_13"],
  });
}

获取支持的格式

以下示例调用 getSupportFormat() 静态方法并将结果记录到控制台。

js
// check supported types
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);
  });

规范

规范
图像中的加速形状检测
# 条形码检测 API

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅