BarcodeDetector

Limited availability

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

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Invalid slug for templ/sidebar: Barcode Detector API

Experimental:これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

BarcodeDetector はバーコード検出 API のインターフェイスで、画像内から線形および二次元バーコードを検出できるようにします。

コンストラクター

BarcodeDetector.BarcodeDetector(): BarcodeDetector オブジェクトを作成して返します。オプションでbarcodeDetectorOptions を指定します。

メソッド

detect()

Promise で、以下のプロパティを持つdetectedBarcode オブジェクトの配列で履行されます。

boundingBox:DOMRectReadOnly で、画像内にある検出されたバーコードの範囲を表す矩形の寸法を返します。
cornerPoints: 検出されたバーコードの四隅の点の、画像に対する X および Y 座標で、左上から時計回りに算出されます。画像内の遠近感の歪みにより、正方形にならない場合があります。
format: 検出されたバーコードの形式。（形式の完全な一覧についてはバーコード検出 API 概要ページを参照してください。）
rawValue: バーコードデータをデコードした文字列です。

getSupportedFormats()

Promise を返します。これは対応しているバーコード形式の種類の配列 (Array) で履行されます。

例

検出器の生成

この例では、対応している形式を指定して新しいバーコード検出器オブジェクトを作成し、ブラウザーの互換性をテストしています。

// 新しい検出器の生成var barcodeDetector = new BarcodeDetector({  formats: ["code_39", "codabar", "ean_13"],});// 互換性のチェックif (barcodeDetector) {  console.log("Barcode Detector に対応しています。");} else {  console.log("Barcode Detector はこのブラウザーでは対応していません。");}

対応している形式の取得

以下の例では、静的メソッドのgetSupportFormat() を呼び出して、結果をコンソールへ出力します。

// check supported typesBarcodeDetector.getSupportedFormats().then((supportedFormats) => {  supportedFormats.forEach((format) => console.log(format));});

バーコードの検出

この例では、detect() メソッドを使用して、与えられた画像内のバーコードを検出しています。これらは繰り返し処理され、バーコードのデータはコンソールに記録されます。

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