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

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

概念和用法

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

检测是通过 detect() 方法实现的，该方法的参数是一个图像对象，可以是一个 <img> 元素，Blob，ImageData 或一个 CanvasimageSource。可选参数可以传递给 BarcodeDetector 构造函数，以提供关于要检测的条形码格式的提示。

支持的条形码格式

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

aztec

符合 iso24778 标准的正方形二维矩阵，其中心为正方形牛眼图案，因此类似于阿兹特克金字塔。周围不需要有空白区。

code_128

一个符合 iso15417 标准的线性（一维）、双向解码、自检的条形码，能够编码所有 128 个 ASCII 字符（因此命名）。

code_39

一种遵循 iso16388 的线性（一维）、自检条码。它是一种离散的、可变长度的条形码类型。

code_93

一种线性的、连续的、长度可变的、遵循 bc5 标准的符号，它相比 Code 128 具有更大的信息密度，视觉上和 Code 39 相似，Code 93 主要被加拿大邮政用来编码补充递送信息。

codabar

表示字符 0-9，A-D 和符号 - . $ / + 的线性条形码

A linear barcode representing characters 0-9, A-D and symbols - . $ / +

data_matrix (数据矩阵)

一个与方向无关的二维条码，由黑白模块组成，按照 iso16022 的规定，以正方形或矩形图案排列。

ean_13

基于 UPC-A 标准，以及在 ISO15420 中定义的线性条形码。

ean_8

在 iso15420 中定义的线性条形码，源自 IeN-13。

itf

连续，自检，双向可解码条形码。它将始终编码为 14 位数字。

pdf417

具有多行和列的连续二维条形码符号符号格式。它是双向解码的，并遵循 iso15438 标准。

qr_code

遵循 iso18004 标准的二维条形码。编码的信息可以是文本，URL 或其他数据。

upc_a

最常见的线性条码类型之一，在美国广泛应用于零售业。根据 iso15420 的定义，它用条形和空格来表示数字，每个数字都与一个独特的 2 条和 2 个空格的图案相关联，两者宽度可变。UPC-A 可以对 12 位数字进行编码，这些数字可以分配给每个交易项目，从技术上讲，它是 EAN-13 的一个子集（UPC-A 代码在 EAN-13 中表示时，第一个字符设置为 0）。

upc_e

iso15420 中定义的 UPC-A 的一个变体，压缩了不必要的零，使条形码更加紧凑。

unknown

该值被平台用来表示它不知道正在检测或支持的是哪种条形码格式。

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

接口

BarcodeDetector

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

实例

创建一个检测器

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

// 检查兼容性
if (!('BarcodeDetector' in window)) {
  console.log('此浏览器不支持条形码检测器。');
} else {
  console.log('支持条形码检测器！');

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

获取支持的格式

下面的实例调用 getSupportFormat() 静态方法，并将结果记录到控制台。

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

检测条形码

本实例使用 detect() 方法来检测给定图像内的条形码。重复这些操作，并将条形码数据记录到控制台。

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

规范

规范	状态	备注
Accelerated Shape Detection in Images	草稿	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 图像中的加速形状检测
• 形状检测 API：一张图片胜过千言万语，面孔和条形码。