Movatterモバイル変換


[0]ホーム

URL:


  1. 面向开发者的 Web 技术
  2. Web API
  3. BarcodeDetector

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in EnglishAlways switch to English

BarcodeDetector

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全上下文: 此特性仅在一些支持的浏览器安全上下文(HTTPS)中可用。

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

实验性:这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

Barcode Detection APIBarcodeDetector 接口允许检测图像中的条形码和二维码。

构造方法

BarcodeDetector.BarcodeDetector()实验性

使用可选的BarcodeDetectorOptions 参数创建并返回一个BarcodeDetector 对象。

静态方法

getSupportedFormats()实验性

返回一个Promise,它兑现一个Array,包含受支持的条形码格式类型

实例方法

detect()实验性

返回一个Promise,它兑现一个具有以下属性的DetectedBarcode 对象数组:

  • boundingBox: 一个DOMRectReadOnly,返回表示检测到的条形码范围的矩形尺寸,与图像对齐。
  • cornerPoints:检测到的条形码的四个角点相对于图像的 x 和 y 坐标,从左上角开始顺时针旋转。由于图像内的透视变形,这可能不是方形的。
  • format:检测到的条形码格式。(有关格式的完整列表,请参阅受支持的条形码格式类型
  • rawValue:一个从条形码数据解码的字符串。

示例

创建检测器

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

js
// 检查兼容性if (!("BarcodeDetector" in globalThis)) {  console.log("此浏览器不支持条形码检测器。");} else {  console.log("条形码检测器是支持的!");  // 创建新检测器  const barcodeDetector = new BarcodeDetector({    formats: ["code_39", "codabar", "ean_13"],  });}

获取支持的格式

以下示例调用getSupportedFormats() 方法并将结果在控制台打印。

js
// 检查支持的类型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);  });

规范

Specification
Accelerated Shape Detection in Images
# barcode-detection-api

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp