QR-Codes generieren und einbetten

Dec 20, 2025 · 4 min read

Sie müssen einen QR-Code in Ihre Webanwendung integrieren. Vielleicht für einen Zahlungsablauf, einen teilbaren Link oder Event-Tickets. Die Frage ist nicht, ob Sie einen QR-Code verwenden sollten – sondern wie Sie ihn zuverlässig im Browser generieren, ohne Scan-Probleme oder Sicherheitslücken zu verursachen.

Dieser Artikel behandelt die clientseitige QR-Code-Generierung in JavaScript, erklärt, wann SVG- gegenüber Canvas-Ausgabe zu verwenden ist, und geht auf die praktischen Einschränkungen ein, die die Scan-Zuverlässigkeit beeinflussen.

Wichtigste Erkenntnisse

Generieren Sie QR-Codes in JavaScript mit etablierten Bibliotheken – entwickeln Sie keine Codierungs-Logik von Grund auf
Wählen Sie SVG für skalierbare Web-Einbettung, Canvas für programmatische Bildmanipulation
Respektieren Sie Ruhezonen, achten Sie auf Kontrast und testen Sie mit echten Scan-Geräten
Stellen Sie sichtbare Fallbacks für Barrierefreiheit und Sicherheit bereit

QR-Code-Generierung vs. Scannen verstehen

Bevor Sie Code schreiben, unterscheiden Sie zwischen zwei separaten Problemen: Generierung und Scannen.

Die Generierung erfolgt vollständig unter Ihrer Kontrolle. Sie codieren Daten in ein QR-Code-Bild mithilfe von JavaScript-Bibliotheken. Dies funktioniert zuverlässig in allen modernen Browsern.

Das Scannen ist anders. Native Browser-APIs zum Lesen von QR-Codes (wie die Barcode Detection API) bleiben experimentell und verfügen nicht über universelle Unterstützung. Wenn Ihre Anwendung Scan-Funktionalität benötigt, planen Sie Fallbacks ein – typischerweise eine kamerabasierte JavaScript-Bibliothek oder manuelle Eingabefelder.

Dieser Artikel konzentriert sich auf die Generierung. Verwechseln Sie die beiden nicht bei der Planung Ihrer Implementierung.

QR-Codes in JavaScript generieren

Mehrere JavaScript-Bibliotheken übernehmen die QR-Code-Generierung für Frontend-Arbeiten. Gängige Optionen sind qrcode, das sowohl client- als auch serverseitige Generierung unterstützt, qrcode-generator, ein leichtgewichtiger reiner JavaScript-Encoder, und das ältere, aber immer noch weit verbreitete QRCode.js für einfache Canvas- oder DOM-Ausgabe. Keines davon ist “der Standard” – jedes hat Kompromisse bei Bundle-Größe, Ausgabeformaten und Anpassungsoptionen.

Das allgemeine Muster sieht so aus:

Importieren Sie Ihre gewählte Bibliothek
Übergeben Sie die Daten, die Sie codieren möchten (URL, Text, vCard-Daten)
Geben Sie Ausgabeformat und Dimensionen an
Rendern Sie in ein DOM-Element oder extrahieren Sie als Data-URL

Die meisten Bibliotheken akzeptieren Konfigurationen für Fehlerkorrektur-Level (L, M, Q, H). Höhere Level ermöglichen es, dass mehr vom Code beschädigt wird, während er dennoch scannbar bleibt – nützlich, wenn Sie planen, Logos zu überlagern oder auf strukturierten Oberflächen zu drucken.

QR-Codes: SVG vs. Canvas

Wenn Sie QR-Codes im Web einbetten, wählen Sie typischerweise zwischen drei Ausgabeformaten: SVG, Canvas oder PNG/Data-URLs.

SVG-Ausgabe

SVG ist normalerweise die beste Wahl für Web-Einbettung. Das Vektorformat skaliert unendlich ohne Verpixelung und ist damit ideal für responsive Layouts und Druckanwendungen. Dateigrößen bleiben klein, unabhängig von den Anzeigedimensionen. CSS-Styling funktioniert natürlich.

Verwenden Sie SVG, wenn:

Der QR-Code in verschiedenen Größen erscheint
Druckqualität wichtig ist
Sie CSS-basiertes Styling oder Animationen benötigen

Canvas-Ausgabe

Canvas rendert zu einer Bitmap mit einer bestimmten Auflösung. Dies funktioniert gut, wenn Sie pixelgenaue Kontrolle benötigen oder planen, den QR-Code programmatisch mit anderen Grafiken zu kombinieren.

Verwenden Sie Canvas, wenn:

Sie Bilder zum Download generieren
Sie Pixel direkt manipulieren müssen
Sie mit anderen Canvas-basierten Grafiken integrieren

PNG/Data-URLs

Data-URLs ermöglichen es Ihnen, den QR-Code als base64-codierte Bildzeichenfolge einzubetten. Dies eliminiert zusätzliche HTTP-Anfragen, erhöht aber die HTML-Payload-Größe. Nützlich für E-Mail-Templates oder Kontexte, in denen externe Ressourcen nicht zuverlässig sind.

Praktische Einschränkungen, die die Scan-Zuverlässigkeit beeinflussen

Ein QR-Code, der korrekt aussieht, kann dennoch beim Scannen versagen. Achten Sie auf diese Probleme:

Ruhezonen: QR-Codes benötigen leeren Raum um ihre Ränder herum – typischerweise vier Module breit. Das Beschneiden dieses Rands verhindert das Scannen.

Kontrast: Die Spezifikation geht von dunklen Modulen auf hellem Hintergrund aus. Invertierte Farben oder kontrastarme Kombinationen reduzieren die Zuverlässigkeit. Streben Sie mindestens ein Kontrastverhältnis von 4:1 an.

Größe: Die minimal scannbare Größe hängt von Betrachtungsdistanz und Kameraqualität ab. Für Bildschirmanzeige können kleinere Größen auf modernen Geräten funktionieren, aber die Ergebnisse hängen von Betrachtungsdistanz und Kameraqualität ab. Für Druck berechnen Sie basierend auf der erwarteten Scan-Distanz.

Logo-Overlays und starkes Styling: Das Hinzufügen von Logos in der Mitte nutzt die Fehlerkorrektur – der Scanner behandelt das Logo als Beschädigung und rekonstruiert die Daten. Dies funktioniert nur mit höheren Fehlerkorrektur-Leveln (Q oder H), und aggressives Styling kann die wiederherstellbaren Grenzen überschreiten. Testen Sie gründlich.

Sicherheits- und UX-Überlegungen

QR-Codes, die URLs codieren, schaffen Phishing-Möglichkeiten. Benutzer können das Ziel nicht vor dem Scannen überprüfen. Wenn Ihre Anwendung QR-Codes aus Benutzereingaben generiert, validieren und bereinigen Sie diese Eingabe. Erwägen Sie, die codierte URL als sichtbaren Text neben dem Code anzuzeigen.

Für Barrierefreiheit stellen Sie die codierten Informationen immer in einem alternativen Format bereit. Ein sichtbarer Link neben dem QR-Code dient Benutzern, die nicht scannen können oder wollen.

Serverseitige Generierung

Während sich dieser Artikel auf clientseitige Ansätze konzentriert, hat serverseitige Generierung legitime Anwendungsfälle: Reduzierung der Client-Bundle-Größe, Caching generierter Codes oder Generierung von Codes in Umgebungen ohne JavaScript. Bibliotheken existieren für Node.js, Python, Go und die meisten anderen Backend-Sprachen. Die Überlegungen zum Ausgabeformat bleiben dieselben.

Fazit

Die technische Implementierung der QR-Code-Generierung ist unkompliziert. Verwenden Sie etablierte JavaScript-Bibliotheken, anstatt Codierungs-Logik von Grund auf zu entwickeln. Wählen Sie SVG für skalierbare Web-Einbettung und Canvas für programmatische Bildmanipulation. Die Zuverlässigkeit Ihrer QR-Codes ergibt sich aus der Einhaltung der Einschränkungen: Respektieren Sie Ruhezonen, stellen Sie angemessenen Kontrast sicher und testen Sie mit echten Scan-Geräten. Stellen Sie immer sichtbare Fallbacks sowohl für Barrierefreiheit als auch für Sicherheitszwecke bereit.

Häufig gestellte Fragen

Fehlerkorrektur-Level bestimmen, wie viel Beschädigung ein QR-Code aushalten kann, während er scannbar bleibt. L korrigiert etwa 7% Beschädigung, M korrigiert 15%, Q korrigiert 25% und H korrigiert 30%. Verwenden Sie höhere Level (Q oder H), wenn Sie Logo-Overlays hinzufügen oder auf strukturierten Oberflächen drucken, da der Scanner diese Modifikationen als Beschädigung behandelt und die fehlenden Daten rekonstruiert.

Häufige Ursachen sind beschnittene Ruhezonen (der leere Rand um den Code), unzureichender Kontrast zwischen dunklen und hellen Modulen oder eine Größe, die für die Scan-Distanz zu klein ist. Stellen Sie mindestens vier Module leeren Raum um den Rand sicher, halten Sie ein Kontrastverhältnis von mindestens 4:1 ein und testen Sie bei der tatsächlichen Betrachtungsdistanz mit echten Geräten.

Clientseitige Generierung funktioniert gut für die meisten Webanwendungen und reduziert die Serverlast. Serverseitige Generierung ist sinnvoll, wenn Sie die Client-Bundle-Größe reduzieren, generierte Codes zur Wiederverwendung cachen oder Codes in Umgebungen ohne JavaScript generieren müssen. Beide Ansätze produzieren identische Ausgaben – wählen Sie basierend auf Ihren Architektur-Anforderungen.

Ja, aber nur mit höheren Fehlerkorrektur-Leveln (Q oder H). Der Scanner behandelt das Logo als Beschädigung und verwendet Fehlerkorrektur, um die Daten zu rekonstruieren. Halten Sie Logos klein, zentriert und testen Sie gründlich mit mehreren Scan-Apps. Aggressives Styling oder übergroße Logos können die wiederherstellbaren Grenzen überschreiten und das Scannen vollständig verhindern.

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.