Barcode Detection API
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 Barcode Detection API erkennt lineare und zweidimensionale Barcodes in Bildern.
Konzepte und Verwendung
Die Unterstützung für die Barcode-Erkennung in Webanwendungen eröffnet eine Vielzahl von Anwendungsfällen durch unterstützte Barcode-Formate. QR-Codes können für Online-Zahlungen, die Navigation im Web oder die Herstellung von Verbindungen in sozialen Medien verwendet werden, Aztec-Codes können zum Scannen von Bordkarten eingesetzt werden, und Einkaufs-Apps können EAN- oder UPC-Barcodes verwenden, um Preise physischer Artikel zu vergleichen.
Die Erkennung erfolgt über die Methode detect()
, die ein Bildobjekt nimmt; es kann eines dieser Objekte sein:
ein HTMLImageElement
,
ein SVGImageElement
,
ein HTMLVideoElement
,
ein HTMLCanvasElement
,
ein ImageBitmap
,
ein OffscreenCanvas
,
ein VideoFrame
,
ein Blob
,
oder ein ImageData
.
Optionale Parameter können an den Konstruktor von BarcodeDetector
übergeben werden, um Hinweise zu geben, welche Barcode-Formate erkannt werden sollen.
Unterstützte Barcode-Formate
Die Barcode Detection API unterstützt die folgenden Barcode-Formate:
Format | Beschreibung | Bild |
---|---|---|
aztec | Eine quadratische, zweidimensionale Matrix nach iso24778 mit einem quadratischen Bullaugenmuster in der Mitte, das an eine aztekische Pyramide erinnert. Es ist keine umgebende Leerzone erforderlich. | |
code_128 | Ein linearer (eindimensionaler), bidirektional dekodierbarer, selbstprüfender Barcode gemäß iso15417, der alle 128 Zeichen des ASCII kodieren kann (daher der Name). | |
code_39 | Ein linearer (eindimensionaler), selbstprüfender Barcode gemäß iso16388. Er ist ein diskreter und variabler Barcode-Typ. | |
code_93 | Eine lineare, kontinuierliche Symbolik mit variabler Länge gemäß bc5. Sie bietet eine höhere Informationsdichte als Code 128 und der optisch ähnliche Code 39. Code 93 wird hauptsächlich von Canada Post zur Kodierung zusätzlicher Lieferinformationen verwendet. | |
codabar | Ein linearer Barcode, der Zeichen 0-9, A-D und Symbole - . $ / + darstellt. | |
data_matrix | Ein richtungsunabhängiger, zweidimensionaler Barcode, bestehend aus schwarz-weißen Modulen, die entweder in einem quadratischen oder rechteckigen Muster gemäß iso16022 angeordnet sind. | |
ean_13 | Ein linearer Barcode basierend auf dem UPC-A-Standard und definiert in iso15420. | |
ean_8 | Ein linearer Barcode definiert in iso15420 und abgeleitet von EAN-13. | |
itf | Ein kontinuierlicher, selbstprüfender, bidirektional dekodierbarer Barcode. Er kodiert immer 14 Ziffern. | |
pdf417 | Eine kontinuierliche, zweidimensionale Barcode-Symbologie mit mehreren Zeilen und Spalten. Er ist bidirektional dekodierbar und verwendet den iso15438-Standard. | |
qr_code | Ein zweidimensionaler Barcode, der den iso18004-Standard verwendet. Die kodierte Information kann Text, URL oder andere Daten sein. | |
upc_a | Einer der am häufigsten verwendeten linearen Barcode-Typen und weit verbreitet im Einzelhandel in den Vereinigten Staaten. Definiert in iso15420, stellt er Ziffern durch Streifen von Balken und Lücken dar, wobei jede Ziffer mit einem eindeutigen Muster von 2 Balken und 2 Lücken, beide variabler Breite, verbunden ist. UPC-A kann 12 Ziffern kodieren, die jedem Handelsartikel eindeutig zugeordnet sind, und ist technisch gesehen ein Teil der EAN-13 (UPC-A-Codes sind in EAN-13 mit dem ersten Zeichensatz auf 0 dargestellt). | |
upc_e | Eine Variation von UPC-A, definiert in iso15420, die unnötige Nullen für einen kompakteren Barcode auslässt. | |
unknown | Dieser Wert wird von der Plattform verwendet, um anzuzeigen, dass sie nicht weiß oder angibt, welches Barcode-Format erkannt oder unterstützt wird. |
Sie können die von der Benutzeroberfläche unterstützten Formate über die Methode getSupportedFormats()
überprüfen.
Schnittstellen
BarcodeDetector
Experimentell-
Die
BarcodeDetector
-Schnittstelle der Barcode Detection API ermöglicht die Erkennung von linearen und zweidimensionalen Barcodes in Bildern.
Beispiele
Erstellen eines Detektors
Dieses Beispiel testet die Browser-Kompatibilität und erstellt ein neues Barcode-Detektor-Objekt mit angegebenen unterstützten Formaten.
// 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"],
});
}
Abrufen unterstützter Formate
Das folgende Beispiel ruft die Methode getSupportedFormats()
auf und protokolliert die Ergebnisse in der Konsole.
// check supported types
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Erkennen von Barcodes
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.
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