前端原生API识别条形码

最近给自己的网站添加了一个在线生成二维码的功能，同时也了解到原生API可以解析二维码和条形码

BarcodeDetector API

该可以用来检测图形中的二维码和条形码。

构造函数

if ("BarcodeDetector" in window) {
  // 创建解析器
  const barcodeDetector = new BarcodeDetector({
    formats: ["code_39", "codabar", "ean_13"， "qr_code"],
  });
}

检测支持的条码类型

下面的例子调用getSupportFormat()方法并将结果打印到控制台。

BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});

getSupportedFormats是一个静态方法，返回一个Promise，值为一个支持的format的数组。

下面的在线例子中显示了当前浏览器支持的类型

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

格式	描述	图像
aztec	遵循 iso24778 的正方形二维矩阵，其中心有一个正方形靶心图案，因此类似于阿兹特克金字塔。不需要周围的空白区域。
code_128	一个线性（一维）、可双向解码、自检的条形码，遵循iso15417，能够编码ASCII的所有128个字符（因此命名）。
code_39	一个线性的（一维的），遵循iso16388的自检条码。它是一个离散的和可变长度的条形码类型。
code_93	一个线性的、连续的符号学，在bc5之后有一个可变的长度。它比Code 128和视觉上相似的Code 39提供更大的信息密度。Code 93主要被加拿大邮政用来编码补充的送货信息。
codabar	代表字符0-9、A-D和符号的线性条码 - ...$ / +
data_matrix	一个与方向无关的二维条码，由黑色和白色模块组成，按照iso16022的规定排列成正方形或长方形。
ean_13	一种基于UPC-A标准并在iso15420中定义的线性条码。
ean_8	一个在iso15420中定义的线性条码，并从EAN-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	这个值被平台用来表示它不知道或不指定正在检测或支持哪种条形码格式。

条码的解析

使用**detect()**方法解析提供的图片中的条形码

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

下面是一个在线的例子：