Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

BarcodeDetector

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more support for this feature? Tell us why.

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.

Das BarcodeDetector Interface der Barcode Detection API ermöglicht die Erkennung von eindimensionalen 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, das mit einem Array der unterstützten Barcode-Formattypen erfüllt wird.

Instanzmethoden

detect()

Gibt ein Promise zurück, das mit einem Array von DetectedBarcode-Objekten erfüllt wird, die folgende Eigenschaften aufweisen:

  • boundingBox: Ein DOMRectReadOnly, das die Abmessungen eines Rechtecks, das das Ausmaß eines erkannten Barcodes darstellt und mit dem Bild ausgerichtet ist, zurückgibt.
  • cornerPoints: Die x- und y-Koordinaten der vier Eckpunkte des erkannten Barcodes relativ zum Bild, beginnend mit der oberen linken Ecke und im Uhrzeigersinn fortsetzend. Dies könnte aufgrund von Perspektivverzerrungen im Bild nicht quadratisch sein.
  • format: Das erkannte Barcode-Format. (Für eine vollständige Liste der Formate konsultieren Sie die unterstützten Barcode-Formate).
  • rawValue: Ein aus den Barcodedaten 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"],
  });
}

Ermitteln der unterstützten Formate

Das folgende Beispiel ruft die statische Methode getSupportedFormats() 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 Methode detect(), 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

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

Browser-Kompatibilität

Siehe auch