BarcodeDetector

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die BarcodeDetector-Schnittstelle der Barcode Detection API ermöglicht die Erkennung von linearen und zweidimensionalen Barcodes in Bildern.

Konstruktoren

BarcodeDetector.BarcodeDetector()

Erstellt und gibt ein BarcodeDetector-Objekt zurück, mit optionalen BarcodeDetectorOptions.

Statische Methoden

getSupportedFormats()

Gibt ein Promise zurück, welches mit einem Array von unterstützten Barcode-Formattypen erfüllt wird.

Instanzmethoden

detect()

Gibt ein Promise zurück, welches mit einem Array von DetectedBarcode-Objekten mit folgenden Eigenschaften erfüllt wird:

  • boundingBox: Ein DOMRectReadOnly, das die Abmessungen eines Rechtecks zurückgibt, das den Umfang eines erkannten Barcodes darstellt und mit dem Bild ausgerichtet ist.
  • cornerPoints: Die x- und y-Koordinaten der vier Eckpunkte des erkannten Barcodes relativ zum Bild, beginnend mit der oberen linken Ecke und im Uhrzeigersinn. Aufgrund von perspektivischen Verzerrungen im Bild könnte dies nicht quadratisch sein.
  • format: Das erkannte Barcode-Format. (Für eine vollständige Liste der Formate konsultieren Sie die Liste über die unterstützten Barcode-Formate).
  • rawValue: Ein aus den Barcode-Daten dekodierter String.

Beispiele

Erstellen eines Detektors

Dieses Beispiel erstellt ein neues Barcode-Detektor-Objekt mit angegebenen unterstützten Formaten und testet die Browser-Kompatibilität.

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"],
  });
}

Unterstützte Formate abrufen

Das folgende Beispiel ruft die getSupportFormat()-statische Methode auf und protokolliert die Ergebnisse in der Konsole.

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

Barcodes erkennen

Dieses Beispiel verwendet die detect()-Methode, um die Barcodes im angegebenen Bild zu erkennen. Diese werden durchlaufen und die Barcode-Daten werden in der Konsole protokolliert.

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch