BarcodeDetector: detect() メソッド
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
もっと多くのブラウザーがこの機能に対応してほしいですか？ 理由を教えてください。
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
メモ: この機能はウェブワーカー内で利用可能です。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
detect() は BarcodeDetector インターフェイスのメソッドで、画像内に検出されたバーコードの配列 (Array) で履行されるプロミス (Promise) を返します。
構文
detect(imageBitmapSource)
引数
imageBitmapSource-
画像ソースをパラメータとして受け取ります。これは、
HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas、VideoFrame、画像型のBlob、またはImageDataオブジェクトのいずれかです。
戻り値
以下のプロパティを持つ detectedBarcode オブジェクトの配列で履行される Promise を返します。
boundingBox- :
DOMRectReadOnly。検出されたバーコードの範囲を表す矩形の寸法を、画像に合わせて返します。
- :
cornerPoints: 検出されたバーコードの 4 つの角の x と y 座標。 左上から時計回りの順で、画像に対する相対座標です。 画像内の遠近歪みにより、正方形にならない場合があります。format- : 検出されたバーコードの形式。（形式の完全な一覧は バーコード検出 API 概要ページ' を参照してください。）
rawValue- : バーコードデータをデコードした文字列です。
例外
TypeError-
パラメータが指定されていない場合、または
typeがImageBitmapSourceの型でない場合。 SecurityErrorDOMException-
imageBitmapSourceにオリジンがあり、それがドキュメントのオリジンと異なる場合、またはimageBitmapSourceがHTMLCanvasElementであり、その origin-clean フラグがfalseに設定されている場合。 InvalidStateErrorDOMException-
imageBitmapSourceがHTMLImageElementであり、完全にデコードされていないか、デコードに失敗した場合にスローされます。または、imageBitmapSourceがHTMLVideoElementであり、そのreadyStateがHAVE_NOTHINGまたはHAVE_METADATAの場合にもスローされます。
例
この例では、 detect() メソッドを使用して、与えられた画像内のバーコードを検出しています。これらは繰り返し処理され、バーコードのデータはコンソールに記録されます。
barcodeDetector
.detect(imageEl)
.then((barcodes) => {
barcodes.forEach((barcode) => console.log(barcode.rawValue));
})
.catch((err) => {
console.error(err);
});
仕様書
| 仕様書 |
|---|
| Accelerated Shape Detection in Images # dom-barcodedetector-detect |