条形码检测 API

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

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

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

条形码检测 API 可检测图像中的线性条形码和二维条形码。

概念和用法

在 Web 应用程序中支持条形码识别可以通过支持的条形码格式解锁各种用例。QR 码可用于在线支付、Web 导航或建立社交媒体连接，Aztec 码可用于扫描登机牌，购物应用程序可以使用 EAN 或 UPC 条形码比较实体商品的价格。

检测通过detect() 方法实现，该方法接受一个图像对象；它可以是以下对象之一：HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas、VideoFrame、Blob 或 ImageData。可选参数可以传递给BarcodeDetector 构造函数，以提供有关要检测的条形码格式的提示。

支持的条形码格式

条形码检测 API 支持以下条形码格式

格式 描述 图像
aztec 一个遵循 iso24778 的方形二维矩阵，其中心带有方形靶心图案，因此类似于阿兹特克金字塔。不需要周围的空白区域。 A sample image of an Aztec barcode. A square with smaller black and white squares inside
code_128 一个遵循 iso15417 的线性（一维）、双向可解码、自校验条形码，能够编码ASCII 的所有 128 个字符（因此得名）。 An image of a code-128 barcode. A horizontal distribution of vertical black and white lines
code_39 一个遵循 iso16388 的线性（一维）、自校验条形码。它是一种离散的、可变长度的条形码类型。 An image of a code-39 barcode. A horizontal distribution of vertical black and white lines
code_93 一个遵循 bc5 的线性、连续符号，长度可变。它比 Code 128 和视觉上相似的 Code 39 提供更大的信息密度。Code 93 主要用于加拿大邮政编码补充送货信息。 An image of a code 93 format barcode. A horizontal distribution of white and black horizontal lines
codabar 一个线性条形码，表示字符 0-9、A-D 和符号 - . $ / + An image of a codabar format barcode. A horizontal distribution of black and white vertical lines
data_matrix 一个遵循 iso16022 的方向无关的二维条形码，由黑色和白色模块组成，这些模块以方形或矩形图案排列。 An example of a data matrix barcode. A square filled with smaller black and white squares
ean_13 一个基于 UPC-A 标准的线性条形码，定义在 iso15420 中。 An image of an EAN-13 format barcode. A horizontal distribution of white and black lines
ean_8 一个定义在 iso15420 中的线性条形码，源自 EAN-13。 An image of an EAN-8 format barcode. A horizontal distribution of vertical black and white lines
itf 一个连续的、自校验的、双向可解码的条形码。它始终编码 14 位数字。 An image of an ITF Barcode. A horizontal distribution of white and black lines
pdf417 一个具有多行多列的连续二维条形码符号格式。它可以双向解码，并使用 iso15438 标准。 An example of a pdf417 barcode format. A rectangle of smaller black and white squares
qr_code 一个使用 iso18004 标准的二维条形码。编码的信息可以是文本、URL 或其他数据。 An example of a QR code. A square of smaller black and white squares
upc_a 最常见的线性条形码类型之一，广泛应用于美国零售业。定义在 iso15420 中，它用条纹和空格表示数字，每个数字与 2 个条纹和 2 个空格的独特图案相关联，两者宽度可变。UPC-A 可以编码 12 位数字，这些数字唯一分配给每个商品，从技术上讲它是 EAN-13 的子集（UPC-A 代码在 EAN-13 中表示，第一个字符设置为 0）。 An image of a upc-a barcode. A rectangle of black and white vertical lines with numbers underneath
upc_e 一个定义在 iso15420 中的 UPC-A 变体，压缩掉不必要的零，以获得更紧凑的条形码。 An image of a upc-e barcode. A rectangle of black and white vertical lines
unknown 此值由平台使用，表示它不知道或未指定正在检测或支持的条形码格式。

您可以通过getSupportedFormats() 方法检查用户代理支持的格式。

接口

BarcodeDetector

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

示例

创建检测器

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

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"],
  });
}

获取支持的格式

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

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);
  });

规范

规范
图像中的加速形状检测
# barcode-detection-api

浏览器兼容性

BCD 表仅在浏览器中加载

另请参见