1. Web
  2. Web API
  3. 條形碼檢測 API

條形碼檢測 API

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

安全上下文： 此功能僅在安全上下文（HTTPS）中可用，且支援此功能的瀏覽器數量有限。

注意：此功能在 Web Workers 中可用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

條形碼檢測 API 可在影像中檢測線性條形碼和二維條形碼。

概念與用法

透過支援的條形碼格式，在 Web 應用中進行條形碼識別可以實現多種用例。QR 碼可用於線上支付、網頁導航或建立社交媒體連線，Aztec 碼可用於掃描登機牌，購物應用可使用 EAN 或 UPC 條形碼來比較實體商品的價格。

檢測是透過 detect() 方法實現的，該方法接受一個影像物件；它可以是以下物件之一：HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas、VideoFrame、Blob 或 ImageData。可以透過 BarcodeDetector 建構函式傳遞可選引數，以提供有關要檢測的條形碼格式的提示。

支援的條形碼格式

條形碼檢測 API 支援以下條形碼格式

格式 描述 影像
aztec 一個遵循 iso24778 的方形二維矩陣，中心有一個方形牛眼圖案，形似阿茲特克金字塔。不需要周圍的空白區域。 A sample image of an Aztec barcode. A square with smaller black and white squares inside
code_128 一個遵循 iso15417 的線性（一維）、雙向可解碼、自校驗條形碼，能夠編碼 ASCII 的所有 128 個字元（因此得名）。 An image of a code-128 barcode. A horizontal distribution of vertical black and white lines
code_39 一個遵循 iso16388 的線性（一維）、自校驗條形碼。它是一種離散的、可變長度的條形碼型別。 An image of a code-39 barcode. A horizontal distribution of vertical black and white lines
code_93 一個遵循 bc5 的線性、連續、可變長度的符號。它比 Code 128 和視覺上相似的 Code 39 具有更高的資訊密度。Code 93 主要由加拿大郵政用於編碼補充配送資訊。 An image of a code 93 format barcode. A horizontal distribution of white and black horizontal lines
codabar 一個線性條形碼，表示字元 0-9、A-D 和符號 - . $ / + An image of a codabar format barcode. A horizontal distribution of black and white vertical lines
data_matrix 一個方向無關的二維條形碼，由黑色和白色模組組成，按照方塊或矩形圖案排列，遵循 iso16022。 An example of a data matrix barcode. A square filled with smaller black and white squares
ean_13 一個基於 UPC-A 標準的線性條形碼，定義在 iso15420 中。 An image of an EAN-13 format barcode. A horizontal distribution of white and black lines
ean_8 一個在 iso15420 中定義的線性條形碼，源自 EAN-13。 An image of an EAN-8 format barcode. A horizontal distribution of vertical black and white lines
itf 一個連續、自校驗、雙向可解碼的條形碼。它總是編碼 14 位數字。 An image of an ITF Barcode. A horizontal distribution of white and black lines
pdf417 一種連續的二維條形碼符號格式，具有多行和多列。它是雙向可解碼的，並使用 iso15438 標準。 An example of a pdf417 barcode format. A rectangle of smaller black and white squares
qr_code 一種使用 iso18004 標準的二維條形碼。編碼的資訊可以是文字、URL 或其他資料。 An example of a QR code. A square of smaller black and white squares
upc_a 最常見的線性條形碼型別之一，廣泛應用於美國零售業。它定義在 iso15420 中，透過條形和空格的組合來表示數字，每個數字都關聯到一個獨特的 2 個條形和 2 個空格的模式，寬度可變。UPC-A 可以編碼 12 位數字，這些數字唯一地分配給每個貿易專案，並且在技術上是 EAN-13 的一個子集（UPC-A 程式碼在 EAN-13 中表示為第一個字元設定為 0）。 An image of a upc-a barcode. A rectangle of black and white vertical lines with numbers underneath
upc_e UPC-A 的一個變體，定義在 iso15420 中，透過刪除不必要的零來壓縮，從而獲得更緊湊的條形碼。 An image of a upc-e barcode. A rectangle of black and white vertical lines
unknown 此值用於平臺，以表示其不知道或未指定正在檢測或支援的條形碼格式。

您可以透過 getSupportedFormats() 方法檢查使用者代理支援的格式。

介面

BarcodeDetector

條形碼檢測 API 的 BarcodeDetector 介面允許在影像中檢測線性條形碼和二維條形碼。

示例

建立檢測器

此示例測試瀏覽器相容性，並建立一個新的條形碼檢測器物件，指定了支援的格式。

js
// check compatibility
if (!("BarcodeDetector" in globalThis)) {
  console.log("Barcode Detector is not supported by this browser.");
} else {
  console.log("Barcode Detector supported!");

  // create new detector
  const barcodeDetector = new BarcodeDetector({
    formats: ["code_39", "codabar", "ean_13"],
  });
}

獲取支援的格式

以下示例呼叫 getSupportedFormats() 方法並將結果記錄到控制檯。

js
// check supported types
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);
  });

規範

規範
影像中的加速形狀檢測
# barcode-detection-api

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者 修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤
© . Content available under a Creative Commons license.