条形码检测 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 | 草稿 | 初始定义。 |
桌面浏览器兼容性
特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基础支持 | 83 | 83 | 不支持 | 不支持 | 支持 | 不支持 |
BarcodeDetector() 构造函数 | 83 | 83 | 不支持 | 不支持 | 支持 | 不支持 |
detect | 83 | 83 | 不支持 | 不支持 | 支持 | 不支持 |
getSupportedFormats | 83 | 83 | 不支持 | 不支持 | 支持 | 不支持 |
移动浏览器兼容性
特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
基础支持 | 83 | 83 | 未知 | 不支持 | 未知 | 支持 | 不支持 |
BarcodeDetector() 构造函数 | 83 | 83 | 未知 | 不支持 | 未知 | 支持 | 不支持 |
detect | 83 | 83 | 未知 | 不支持 | 未知 | 支持 | 不支持 |
getSupportedFormats | 83 | 83 | 未知 | 不支持 | 未知 | 支持 | 不支持 |