BarcodeDetector.detect()

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

detect() は BarcodeDetector インターフェイスのメソッドで、画像内に検出されたバーコードの配列 (Array) で履行されるプロミス (Promise) を返します。

構文

js
var detectedBarcode = BarcodeDetector.detect(ImageBitmapSource);

引数

image

引数として ImageBitmapSource を受け取ります。これは要素、画像型の Blob、ImageDataオブジェクトの何れかです。

返値

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

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

例外

TypeError

引数が指定されていないか、 type が ImageBitmapSource のものでない場合。

例

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

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

仕様書

Specification
Accelerated Shape Detection in Images
# dom-barcodedetector-detect

ブラウザーの互換性

BCD tables only load in the browser