QR — Manual

Zurück zur Übersicht: QR · Tool live öffnen: www.jpkc.com/tools/qr/

Dieses Manual beschreibt den QR-Code-Generator vollständig: jeden Inhaltstyp, jede Gestaltungsoption und jede Export-Möglichkeit. Die Oberfläche des Tools ist auf Englisch — die Labels werden hier in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im Interface wiederfindest.

Aufbau der Oberfläche

Die Seite hat zwei Spalten:

• Links (breit) — die Eingabe: oben die Karte Content mit dem Inhaltstyp, darunter Main Options, dann die Gestaltungskarten Dots Options, Background Options, Corners Square Options, Corners Dot Options und ganz unten Center Image / Logo.
• Rechts (schmal, mitlaufend) — die Karte Preview mit der Live-Vorschau, einer Größenanzeige, dem Statusbereich (Scan-Test, Kapazität, Warnungen) und den Aktionsknöpfen.

Die Vorschau aktualisiert sich automatisch: beim Tippen, bei Farben, Zahlenfeldern und Schiebereglern rund 400 ms verzögert, bei den meisten Auswahlfeldern und Schaltern der Optionen (etwa QR Shape, Error Correction, die Punkt- und Eck-Stile oder Transparent background) sofort. Ausnahmen mit derselben Verzögerung: Security und Hidden network der WiFi-Maske sowie die Gradient-Auswahl (Linear/Radial). Der Knopf Generate rendert zusätzlich explizit neu und bestätigt das per Hinweis. Bleibt die Eingabe leer, erzeugt das Tool keinen Code und meldet stattdessen „Enter some content to create a QR code."

Inhaltstyp wählen (Content Type)

Über das Auswahlfeld Content Type legst du fest, was kodiert wird. Je nach Auswahl erscheint eine passende Eingabemaske, und das Tool baut daraus automatisch die korrekte Zeichenkette für den QR-Code. Es gibt neun Typen. Lässt du die Pflichtangaben eines Typs leer, entsteht kein Code — statt etwa eines QR-Codes, der nur https:// enthält.

Plain Text

Die Voreinstellung. Ein großes Textfeld nimmt beliebigen Text, eine URL oder strukturierte Daten auf (vorbefüllt mit https://www.jpkc.com). Über den Knopf Upload .txt kannst du den Inhalt einer Textdatei laden, statt ihn zu tippen (angenommen werden Dateien mit Text-MIME-Typ oder der Endung .txt). Mit Strg+Enter im Textfeld löst du eine Neugenerierung aus.

URL

Ein Feld Website URL für eine Webadresse. Fehlt das Schema, ergänzt das Tool automatisch https:// — du kannst also example.com eingeben und bekommst https://example.com kodiert. Ein vorhandenes Schema (http:, https:, ftp: …) bleibt unverändert. Als Schema wertet das Tool allerdings alles, was vor dem ersten Doppelpunkt aus Buchstaben, Ziffern, Punkten, Plus- oder Minuszeichen besteht und mit einem Buchstaben beginnt — Adressen mit Port wie localhost:8080 oder example.com:8443/pfad bekommen deshalb kein https://. Solche Adressen gibst du immer mit Schema ein.

WiFi Network

Erzeugt einen WLAN-Zugang zum Einscannen. Felder: Network Name (SSID), Password, Security und der Schalter Hidden network für versteckte Netze. Die Auswahl Security bietet:

Daraus entsteht die Standard-Zeichenkette im Format:

WIFI:T:<WPA|SAE|WEP|nopass>;S:<SSID>;P:<Passwort>;H:true;;

Das Feld P: entfällt bei None (Open), H:true erscheint nur, wenn Hidden network eingeschaltet ist. Sonderzeichen in SSID und Passwort (\ ; , : ") werden escaped. Ohne SSID entsteht kein Code. Wer den Code scannt, kann sich auf den meisten Smartphones mit einem Tippen verbinden.

vCard (Contact)

Eine digitale Visitenkarte. Felder: First Name, Last Name, Organization, Phone, Email und Website. Das Tool baut daraus eine vCard in Version 3.0 (BEGIN:VCARD … END:VCARD, Zeilenenden CRLF). Leere Felder für Organisation, Telefon, E-Mail und Website fallen weg; die Zeilen N: (strukturierter Name) und FN: (Anzeigename) stehen dagegen immer in der vCard. Vor- und Nachname füllen beide — fehlen sie, bleibt N: leer (N:;;;;) und FN: übernimmt die Organisation oder bleibt ebenfalls leer. In Namen und Organisation werden Backslash, Semikolon, Komma und Zeilenumbrüche nach vCard-Regeln escaped, damit etwa „Müller, Schmidt & Partner" nicht in zwei Felder zerfällt. Sind alle Felder leer, entsteht kein Code.

Email

Erzeugt einen mailto:-Link. Felder: To (Empfänger), Subject (Betreff) und Message (Text). Betreff und Text werden URL-kodiert als ?subject=…&body=… angehängt. Ein Scan öffnet das Mailprogramm mit vorbereiteter Nachricht.

SMS

Erzeugt einen SMSTO:-Eintrag aus Phone Number und Message. Leerzeichen, Klammern, Punkte, Schrägstriche und Bindestriche entfernt das Tool aus der Nummer. Ein Scan öffnet die SMS-App mit Empfänger und Text. Das Ergebnis hat die Form SMSTO:<Nummer>:<Nachricht>.

Phone Call

Ein Feld Phone Number für einen Anruf-Code. Auch hier entfernt das Tool Leer- und Trennzeichen; das internationale Format mit + funktioniert überall. Ergebnis: tel:<Nummer>, also etwa tel:+49821123456. Ein Scan bietet an, die Nummer zu wählen.

Location (Geo)

Zwei Felder Latitude (Breite, −90 bis 90) und Longitude (Länge, −180 bis 180) in Dezimalgrad (WGS 84). Daraus entsteht geo:<Breite>,<Länge>, etwa geo:48.3705,10.8978; ein Scan öffnet den Ort in der Karten-App des Smartphones. Fehlt ein Wert oder liegt er außerhalb des Bereichs, entsteht kein Code.

Calendar Event

Ein Termin zum Übernehmen in den Kalender. Felder: Title, Location, Start, End (beide als Datum mit Uhrzeit) und Description. Das Tool baut daraus einen iCalendar-Block:

BEGIN:VEVENT
SUMMARY:<Titel>
LOCATION:<Ort>
DTSTART:20261015T143000
DTEND:20261015T160000
DESCRIPTION:<Beschreibung>
END:VEVENT

Leere Felder fallen weg; Titel, Ort und Beschreibung werden wie bei der vCard escaped. Die Zeiten sind „floating", also ohne Zeitzone: Das Smartphone trägt den Termin in seiner eigenen Ortszeit ein. Ein Code entsteht, sobald Title oder Start gesetzt ist — für einen Kalendereintrag, den Scanner zuverlässig übernehmen, füllst du beides aus.

Umlaute, Emoji und andere Schriften

Alle Inhaltstypen werden als UTF-8 kodiert. Umlaute, ß, Kyrillisch, chinesische Zeichen oder Emoji landen damit korrekt im Code und werden von aktuellen Scannern richtig angezeigt. Reiner ASCII-Text geht unverändert an die Bibliothek, damit sie für Ziffern oder Großbuchstaben weiterhin die kompakteren Modi Numeric bzw. Alphanumeric wählen kann.

Hauptoptionen (Main Options)

Größe (Size)

Size (Pixels) bestimmt die Kantenlänge des Codes in Pixeln. Erlaubt ist 50 bis 3000, Voreinstellung 350. Werte außerhalb werden automatisch in den Bereich zurückgeholt. Die aktuelle Größe steht als Badge über der Vorschau (z. B. 350 × 350 px). Die Zahl legt die Pixelmaße der Rasterexporte (PNG/JPEG/WebP) fest und ist zugleich die Nenngröße des SVG (width/height, so erscheint es auch nach Copy SVG). Die Modulgröße rundet die Bibliothek dabei auf ganze Pixel ab, der Rest landet als zusätzlicher Rand — im Rasterbild wie im SVG. Bei sehr kleinen Werten fällt das deutlich aus: Bei 50 px, eingeschaltetem Schalter Quiet zone of 4 modules (7 px Rand, siehe unten) und einem Code mit 25 × 25 Modulen ist jedes Modul nur 1 px groß, und der Code belegt bloß die Hälfte der Kantenlänge. Das fertige SVG lässt sich verlustfrei skalieren, behält aber dieses Verhältnis von Code und Rand. Für SVG-Exporte lohnt sich deshalb eine Size von einigen hundert Pixeln, dann fällt die Rundung kaum ins Gewicht.

Rand (Margin)

Margin (Pixels) ist der Rand (die Quiet Zone) rund um den Code, 0 bis 400 Pixel. Der Rand liegt innerhalb der unter Size gewählten Kantenlänge.

Darunter sitzt der Schalter Quiet zone of 4 modules (recommended), standardmäßig an. Dann berechnet das Tool den Rand selbst, und zwar so, dass ringsum mindestens vier Module frei bleiben, wie es die QR-Spezifikation verlangt: Rand = aufgerundet(4 × Size ÷ (Modulzahl + 8)). Bei 350 px und einem Code mit 25 × 25 Modulen sind das 43 px. Der berechnete Wert steht im Feld Margin, das Feld selbst ist gesperrt. Weil die Bibliothek die Modulgröße auf ganze Pixel abrundet und den Code mittig setzt, bleibt meist etwas mehr frei: Im Beispiel werden die Module 10 px groß, der Code 250 px breit, und der tatsächliche Rand beträgt 50 px — fünf Module.

Zwei Grenzen hat die Automatik. Der Rand ist auf 400 px gedeckelt; bei Size nahe 3000 px und einem Code mit nur 21 × 21 Modulen (Version 1) reicht das knapp nicht mehr für volle vier Module, und eine Warnung gibt es in diesem Fall nicht. Und im Kreismodus gilt der Rand nur außerhalb des Kreises — wie wenig Platz direkt um den eigentlichen Code bleibt, steht unter QR Shape.

Schaltest du die Automatik aus, gibst du den Rand von Hand ein. Liegt er unter vier Modulen, erscheint unter der Vorschau eine Warnung mit dem Knopf Use N px, der die Automatik wieder einschaltet. Warum der Rand so wichtig ist, steht in den Tipps & Tricks.

QR-Form (QR Shape)

QR Shape wählt die Gesamtform: Square (quadratisch, Voreinstellung) oder Circle (kreisförmig). Bei Circle wird nichts abgeschnitten: Die Bibliothek verkleinert den vollständigen Code auf das einbeschriebene Quadrat des Kreises (nutzbare Kantenlänge ÷ √2) und füllt den Ring zwischen Quadrat und Kreisrand mit dekorativen Modulen, deren Muster aus dem Code kopiert ist. Diese Deko-Module beginnen schon ein Modul neben dem eigentlichen Code — um die Daten herum bleibt im Kreismodus also nur ein Modul frei, auch wenn der Schalter Quiet zone of 4 modules an ist.

Fehlerkorrektur (Error Correction)

QR-Codes enthalten Redundanz, damit sie auch verschmutzt oder teilweise verdeckt noch lesbar bleiben. Error Correction bietet vier Stufen:

Höhere Stufen kosten Kapazität: Derselbe Inhalt braucht in H einen dichteren Code als in L. Die Byte-Maxima gelten für den Byte-Modus; wie viel dein Inhalt belegt, zeigt die Kapazitätszeile unter der Vorschau. Wichtig: Sobald du ein Logo einbettest, erzwingt das Tool automatisch High (H) und sperrt das Auswahlfeld (siehe Center Image).

Punkte und Ecken gestalten

Dots Options

Dots Style wählt die Form der Datenpunkte: Square, Dots, Rounded, Extra rounded, Classy oder Classy rounded. Darunter steht der Farbblock (siehe Farben), voreingestellt auf Schwarz.

Corners Square Options

Die drei großen Quadrate in den Ecken (die Finder Patterns) lassen sich separat gestalten. Corners Square Style: Same as dots (Voreinstellung — übernimmt den Punktstil), Square, Extra rounded oder Dot. Der Schalter Custom color blendet einen eigenen Farbblock ein; ohne ihn erbt die Eckmarke die Punktfarbe.

Corners Dot Options

Der innere Punkt jeder Eckmarke. Corners Dot Style: Same as dots (Voreinstellung), Square oder Dot. Auch hier gibt es den Schalter Custom color für eine abweichende Farbe.

Farben: Single oder Gradient

Jeder Farbblock (Punkte, Eckmarken, Hintergrund) bietet zwei Modi, umschaltbar über die Knöpfe Single und Gradient:

• Single — eine Farbe, über das Farbfeld wählbar. Der Farbwähler (Coloris) erlaubt Eingabe als HEX, RGB oder HSL (ohne Transparenz) und bietet acht Standard-Farbfelder.
• Gradient — ein Farbverlauf mit zwei Stopps (Color 1, Color 2), als Linear oder Radial (Gradient-Auswahl) und mit einer Rotation von 0 bis 360° (in 5°-Schritten).

Hintergrund (Background Options)

Der Schalter Transparent background macht den Hintergrund durchsichtig (praktisch für SVG/PNG/WebP auf farbigem Untergrund). Ist er aus, stehen ein Farbblock (Single/Gradient, Voreinstellung Weiß) und der Regler Corner Roundness (0–100 % in 5er-Schritten) zur Verfügung, der die Außenecken des Hintergrunds abrundet. Bei transparentem Hintergrund rechnet die Kontrastprüfung gegen Weiß und erinnert daran, den Code auf eine helle, ruhige Fläche zu setzen.

Mittelbild / Logo (Center Image)

Über das Dateifeld in der Karte Center Image / Logo bettest du ein eigenes Bild in die Mitte ein. Akzeptiert werden PNG, JPG, SVG, WebP, AVIF und GIF (animierte GIFs werden als erstes Einzelbild gerendert). Die Optionen:

• Image Size — Größe des Logos relativ zum Code, 10 bis 60 %, Voreinstellung 40 %.
• Image Margin — Abstand rund ums Logo in Pixeln (Voreinstellung 5). Der Maximalwert passt sich automatisch an Code-Größe, Rand, Form, Logogröße und Seitenverhältnis des Bildes an, damit das Bild nicht negativ groß wird; ein zu großer Wert wird zurückgenommen.
• Hide dots behind image — blendet die Module hinter dem Logo aus, damit es sauber wirkt (empfohlen, standardmäßig an).

Sobald ein Logo gesetzt ist, erzwingt das Tool Fehlerkorrektur High (H) und sperrt das Auswahlfeld — ein Logo verdeckt Module, und die hohe Redundanz sorgt dafür, dass der Code trotzdem scannbar bleibt. Weil Stufe H höchstens 1273 Bytes fasst, passt sehr langer Inhalt mit Logo unter Umständen nicht mehr in den Code; die Meldung „Too much content" weist dann darauf hin, dass das Logo Stufe H erzwingt. Der Knopf mit dem Papierkorb-Symbol (oben rechts in der Karte) entfernt das Logo wieder und stellt deine vorherige Fehlerkorrektur-Stufe zurück. Auch das Logo wird rein lokal verarbeitet und nirgendwohin geladen.

Vorschau und Export

Statusbereich: Scan-Test, Kapazität, Warnungen

Direkt unter der Vorschau zeigt das Tool nach jedem Rendern drei Arten von Rückmeldung.

Scan-Test

Das Tool rastert den fertigen Code in mehreren typischen Größen (240, 320, 200 und 400 px, mit weißem Rand) und dekodiert ihn mit der Bibliothek jsQR (öffnet in neuem Tab) (englisch) wieder. Das Ergebnis wird Byte für Byte mit deinem Inhalt verglichen:

Mit Logo läuft der Test, sobald das Bild fertig eingezeichnet ist. Er ersetzt keinen Test mit einer echten Kamera — siehe Tipps & Tricks.

Kapazität

Die Kapazitätszeile nennt die belegten Bytes (UTF-8), das Maximum der aktuellen Fehlerkorrektur-Stufe, die QR-Version mit Modulzahl und die Stufe, etwa:

20 / 2,331 bytes · version 2 (25×25 modules) · error correction M

Passt der Inhalt nicht mehr in einen QR-Code (Version 40), entsteht kein Code. Stattdessen meldet das Tool „Too much content" mit der Bytezahl und dem Maximum, verweist bei Bedarf auf die größere Kapazität von Stufe L oder darauf, dass ein Logo Stufe H erzwingt.

Warnungen

Das Tool prüft die gewählten Farben nach der WCAG-Formel für relative Leuchtdichte. Verglichen wird das ungünstigste Paar aus Punkt- und (eigenen) Eckfarben — bei Verläufen jeder Farbstopp — gegen den Hintergrund:

• Low contrast (rot) — unter 3:1. Scanner brauchen mindestens 3:1, ab 7:1 ist es sicher.
• Contrast … is borderline (gelb) — zwischen 3:1 und 4,5:1; schlechtes Licht und manche Scanner kommen dann nicht mehr mit.
• Light code on a dark background (inverted) (rot) — der Code ist im Mittel heller als sein Hintergrund. Viele Scanner lesen nur dunkle Codes auf hellem Grund.
• Transparent background (Hinweis) — den Code auf eine helle, ruhige Fläche setzen.
• Quiet zone smaller than 4 modules (gelb) — nur bei manuellem Rand; mit Knopf Use N px.

Generate

Generate rendert den Code explizit neu und meldet „QR code generated!". Im laufenden Betrieb brauchst du den Knopf selten, weil die Vorschau ohnehin live nachzieht — er ist vor allem die bewusste „Fertig"-Aktion.

Export: PNG, SVG, JPEG, WebP

Vier Download-Knöpfe exportieren den aktuellen Code:

• SVG — verlustfreier Vektor, ideal für Druck und beliebige Skalierung.
• PNG — Rasterbild mit Transparenz-Unterstützung.
• WebP — moderner, kompakter Rasterformat-Export.
• JPEG — Rasterbild ohne Transparenz. Transparente Bereiche — ein transparenter Hintergrund oder die freien Ecken bei Corner Roundness über 0 % — werden schwarz; mit dunklen Punkten ist der Code dann unlesbar. Für transparente Codes nimmst du PNG, WebP oder SVG.

Alle Rasterformate entstehen in der unter Size gewählten Pixelgröße. Der Dateiname setzt sich aus dem Inhaltstyp und einer Kurzfassung des Inhalts zusammen (höchstens 40 Zeichen, Kleinbuchstaben, Akzente entfernt), etwa qr-url-www-jpkc-com.svg, qr-wifi-cafe-bar-1.png oder qr-event-team-meeting.webp. Ohne Inhalt meldet das Tool „Nothing to download — add some content first".

Copy SVG

Copy SVG legt den Code als SVG-Markup in die Zwischenablage — praktisch, um ihn direkt in HTML, eine Design-Datei oder ein Dokument einzufügen, ohne den Umweg über eine Datei.

Der Lern- und Wissensbereich

Unter dem Generator liegt ein ausführlicher, interaktiver Lernbereich mit drei Reitern:

• Anatomy — die Bausteine eines QR-Codes (Finder Patterns, Alignment Patterns, Timing Patterns, Separatoren, Quiet Zone, Format- und Versions-Information, Dark Module) mit einer interaktiven Übersicht, bei der das Überfahren einer Region sie im Live-Code hervorhebt.
• Encoding — wie aus Text ein QR-Code wird: Kodier-Modi (Numeric, Alphanumeric, Byte, Kanji), Bitstrom, Reed-Solomon-Fehlerkorrektur, Interleaving, Zickzack-Platzierung und Maskierung, dazu Live-Demos der acht Maskenmuster, ein Vergleich L vs. M vs. Q vs. H und eine Schadens-Demo.
• Reference — Nachschlagetabellen: Versionen 1–40 mit Rastergrößen, Maximalkapazität (Version 40), der Alphanumeric-Zeichensatz, gängige Inhaltsformate und ein kurzer Abriss zu Geschichte und Normen.

Der Reiter Reference enthält außerdem praktische Tipps (Quiet Zone, Scan-Abstand, Kontrast, Fehlerkorrektur) und weiterführende Links. Dieser Bereich erklärt die Theorie und beeinflusst die Generierung nicht — er ist ein eigenständiges Lernangebot für alle, die verstehen wollen, was sie da erzeugen.

Architektur und Datenschutz

• Vollständig clientseitig: Der Code wird im Browser mit qr-code-styling gerendert; Inhalt und Logo verlassen den Browser nicht. Es gibt keinen Server-Roundtrip zur Verarbeitung deiner Daten, kein Konto und keine Speicherung.
• Scan-Test lokal: Die Dekodier-Bibliothek jsQR lädt der Browser beim ersten Test vom selben Server nach; geprüft wird ebenfalls nur im Browser.
• UTF-8: Nicht-ASCII-Inhalte werden als UTF-8-Bytes kodiert.
• Vektor zuerst: Intern ist jeder Code ein SVG; Rasterformate werden daraus erzeugt.
• Live-Vorschau: Eingaben, Farben, Zahlenfelder und Schieberegler werden rund 400 ms verzögert übernommen, damit das Tippen flüssig bleibt; die meisten Auswahlfelder und Schalter wirken sofort (Ausnahmen: Security und Hidden network der WiFi-Maske, die Gradient-Auswahl).
• Ruhezone automatisch: Standardmäßig mindestens vier Module Rand, passend zur Modulzahl berechnet.
• Logo erzwingt H: Ein Mittelbild setzt die Fehlerkorrektur fest auf High.

Für den Einstieg und die Zielgruppen siehe die Übersicht. Konkrete Durchläufe stehen in den Beispielen, Strategie und Stolperfallen in den Tipps & Tricks. Ausprobieren kannst du alles im Tool.