1. Web
  2. Web API
  3. 条形码检测 API

条形码检测 API

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，且支持此功能的浏览器数量有限。

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

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

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

概念与用法

通过支持的条形码格式，在 Web 应用中进行条形码识别可以实现多种用例。QR 码可用于在线支付、网页导航或建立社交媒体连接，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 UPC-A 的一个变体，定义在 iso15420 中，通过删除不必要的零来压缩，从而获得更紧凑的条形码。 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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 修改。

在 GitHub 上查看此页面 • 报告此内容的错误
© . Content available under a Creative Commons license.