Barcode Reader

Den Barcode-Leser verwenden

1. Bild ablegen oder hochladen, das einen Barcode enthält. PNG, JPEG, GIF, WebP, BMP und SVG werden alle akzeptiert; die Datei wird in ein HTMLImageElement geladen und nie über das Netzwerk gesendet.
2. Auf die Erkennung warten. Die Seite ruft den BarcodeDetector des Browsers auf, sobald das Bild dekodiert ist. Die Erkennung löst sich typischerweise in Millisekunden bei einem klaren Foto auf, länger bei einer verrauschten oder rotierten Quelle.
3. Das Ergebnis-Panel lesen. Jeder erkannte Barcode zeigt sein Format (EAN-13, Code 128, QR-Code usw.), den dekodierten Wert und einen Kopieren-Knopf für den Wert allein. Mehrere Barcodes in einem Bild erscheinen als Liste.
4. Den Wert kopieren direkt in eine Tabellenkalkulation, ein Inventarsystem, eine Bestellungssuche oder was auch immer auf den dekodierten Text gewartet hat.

Was der Leser intern tut

Die Dekodier-Pipeline verwendet die BarcodeDetector-Schnittstelle der W3C Shape Detection API, die über window.BarcodeDetector bereitgestellt wird. Bei der Instanziierung fragt die Seite die unterstützte Formatliste mit BarcodeDetector.getSupportedFormats() ab und erstellt einen Detektor, der mit den Formaten konfiguriert ist, die diese Seite anbietet. Der Detektor akzeptiert ein ImageBitmap, ein HTMLImageElement, ein HTMLCanvasElement oder einen VideoFrame; die Seite übergibt das geladene Bild direkt. Die Ausgabe ist ein Array von DetectedBarcode-Objekten, jedes mit rawValue, format und einem Eckpunkt-Begrenzungsrahmen.

BarcodeDetector ist eine browser-native API, die von denselben maschinell gelernten Dekodern gestützt wird, die Chrome für die Kamera mitliefert. Auf Android ist die zugrundeliegende Engine ML Kit; auf Desktop-Chromium ist es ein portabler C++-Port derselben. Safari und Firefox haben die API zum Zeitpunkt des Schreibens nicht implementiert, sodass die Seite eine klare "Browser nicht unterstützt"-Meldung anzeigt und den Benutzer bittet, zu einem Chromium-basierten Browser zu wechseln. Es gibt keine clientseitige Bibliothek, die Dekodierungsarbeit erledigt, kein WebAssembly-Bundle zu laden und keinen Upload-Schritt.

Wann dieses Werkzeug sich lohnt

• Dekodieren eines Screenshots eines UPS- oder DHL-Versandetiketts, das von einem Kollegen gesendet wurde, wenn dessen Tracking-System nicht verfügbar oder hinter einem Login ist.
• Den EAN-13 aus einem Produktfoto in einer Anbieter-E-Mail lesen, um den Katalogeintrag nachzuschlagen, ohne 13 Ziffern von Hand einzutippen.
• Die enthaltene URL aus einem QR-Code in einem Marketing-Screenshot, einem Besprechungsraum-Plakat-Foto oder einem gedruckten Onboarding-Flyer ziehen.
• Prüfen, ob ein von deinem eigenen Werkzeug generierter Barcode korrekt zurück konvertiert wird: erstellen, screenshot, und hier dekodieren, um zu bestätigen, dass die Bytes übereinstimmen.
• Inventar-Triage: ein Handyfoto eines Regals mit mehreren SKUs machen und alle sichtbaren Barcodes in einem Durchlauf dekodieren.
• Ein gedrucktes Lageretikett auf Beschädigung prüfen, indem der dekodierte Wert mit der erwarteten Sendungsnummer verglichen wird.

Häufige Fallstricke und Grenzfälle

• Browser-Unterstützung ist das größte Problem. BarcodeDetector ist in Chromium-basierten Browsern (Chrome, Edge, Opera, Brave, Vivaldi) auf Desktop und Android verfügbar. Safari, Firefox und iOS WebKit fehlt es. Die Seite erkennt das und zeigt eine explizite Meldung anstatt still zu scheitern.
• Linux-Chrome-Unterstützung ist teilweise. Die Desktop-Builds auf Linux fehlten historisch die Barcode-Unterstützung, weil die zugrundeliegenden ML Kit-Komponenten nicht weiterverteilbar sind; Chrome 100+ auf Linux stellt die API jetzt bereit, aber mit einer kleineren Formatliste. Verifiziere mit BarcodeDetector.getSupportedFormats().
• Fotos mit geringem Kontrast oder Schrägstellung schlagen fehl. Lineare Barcodes (EAN, UPC, Code 128) benötigen scharfe Kanten; der Decoder lehnt Bilder ab, auf denen die Balken ineinander verschwimmen. Schiesse erneut mit besserem Licht oder höherer Auflösung.
• Reflektierende Oberflächen fressen Daten. Glänzende Produktverpackungen, die unter direktem Licht fotografiert werden, erzeugen Glanzlichter, die Balken aus der Dekodierung fallen lassen. Kippe die Kamera oder schiesse in einem Winkel.
• SVG-Eingaben benötigen einen Rasterisierungsschritt. Browser dekodieren SVG-Bilder zum Renderzeitpunkt, aber die Auflösung hängt von der eingebetteten viewBox und intrinsischen Größe ab; sehr kleine SVG-Barcodes können fehlschlagen. Konvertiere zuerst zu PNG mit 1024 px Breite.
• QR-Code-Fehlerkorrektur maskiert Fehler. Auch ein teilweise verdeckter QR-Code kann dekodiert werden, weil die Reed-Solomon-Fehlerkorrektur vorhanden ist; die linearen Formate haben diesen Puffer nicht und schlagen bei demselben Schadensniveau vollständig fehl.

Barcode-Formate und die dahinterstehenden Standards

EAN-13 und EAN-8 werden von GS1 geregelt und in ISO/IEC 15420 kodifiziert; UPC-A und UPC-E sind die nordamerikanische Untergruppe derselben Familie, zuerst vom Uniform Code Council im Jahr 1973 definiert. Code 128 (ISO/IEC 15417) ist ein hochdichtes lineares Format mit drei Untergruppen (A, B, C) für verschiedene Zeichenklassen, allgegenwärtig im Versand und Logistik. Code 39 (ISO/IEC 16388) ist das ältere alphanumerische Arbeitspferd, das vom US-Militär und der Automobilindustrie verwendet wird; es ist weniger dicht als Code 128, aber einfacher auf Low-Resolution-Geräten zu drucken. ITF (Interleaved 2 of 5, ISO/IEC 16390) ist ein numerisches Format, das für äußere Kartons optimiert ist. QR-Code ist ISO/IEC 18004, eine zweidimensionale Symbolik mit bis zu vier Ebenen der Reed-Solomon-Fehlerkorrektur; der BarcodeDetector gibt die dekodierte UTF-8-Nutzlast zurück, nicht den rohen Bitstrom.

Alternativen und wann sie besser sind

Die Open-Source-Bibliothek zxing (Java, Portierungen auf JS, Swift, Kotlin) ist der langjährige Decoder, der von der Pre-ML-Kit-Ära von Android verwendet wurde, und bleibt die richtige Wahl, wenn du Offline-Dekodierung in einer App benötigst. Das npm-Paket html5-qrcode ist eine kleinere Alternative für In-Page-Kamera-Scanning, wenn du eine Einzelformat-Dekodierungsschleife möchtest. ZBar ist die C/CLI-Option, die in Linux-Distros mitgeliefert wird (apt install zbar-tools) und von der Befehlszeile aus dekodiert: zbarimg label.jpg. iPhone und aktuelle Android-Kameras dekodieren QR-Codes direkt ohne ein Werkzeug. Diese Seite gewinnt, wenn du bereits ein Bild in deinem Browser hast, keine CLI oder App installieren möchtest und das Bild nicht auf einen Remote-Dienst hochladen möchtest.