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

安全上下文
该功能仅在部分或所有支持的浏览器中的安全上下文(HTTPS)中可用。

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

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

概念和用法

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

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

支持的条形码格式

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

aztec

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

Aztec 条形码的实例图像。一个方形,里面有较小的黑白正方形

code_128

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

code-128 条形码的图像。水平分布的垂直黑线和白线

code_39

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

code-39 条码的图像。包含水平分布的垂直黑线和白线。

code_93

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

Code 93 格式条形码的图像。白色和黑色水平线的水平分布

codabar

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

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

codabar 格式条形码的图象。黑白垂直线的水平分布

data_matrix (数据矩阵)

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

数据矩阵条形码的实例。一个方形装满较小的黑白方块

ean_13

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

EAN-13 格式条形码的图像。白色和黑线的水平分布

ean_8

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

EAN-8 格式条形码的图像。垂直黑白线路的水平分布

itf

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

ITF 条形码的图像。白色和黑色线的水平分布

pdf417

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

PDF417 条形码格式的实例。一个较小的黑白方块的矩形

qr_code

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

QR 码的实例。一个由较小的黑白方块组成的正方形

upc_a

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

upc-a 条形码的图像。一个由黑白竖线组成的长方形,下面是数字。

upc_e

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

upc-e 条形码的图像。一个黑白垂直线的矩形。

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 草稿 初始定义。

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持8383 不支持 不支持 支持 不支持
BarcodeDetector() 构造函数8383 不支持 不支持 支持 不支持
detect8383 不支持 不支持 支持 不支持
getSupportedFormats8383 不支持 不支持 支持 不支持

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持8383 未知 不支持 未知 支持 不支持
BarcodeDetector() 构造函数8383 未知 不支持 未知 支持 不支持
detect8383 未知 不支持 未知 支持 不支持
getSupportedFormats8383 未知 不支持 未知 支持 不支持

相关链接