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 und den Aktionsknöpfen.

Die Vorschau aktualisiert sich automatisch (leicht verzögert), während du tippst oder Optionen änderst. Der Knopf Generate rendert zusätzlich explizit neu und bestätigt das per Hinweis.

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 genau sechs Typen:

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 (.txt) laden, statt ihn zu tippen. Mit Strg+Enter im Textfeld löst du eine Neugenerierung aus.

URL

Ein Feld 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.

WiFi Network

Erzeugt einen WLAN-Zugang zum Einscannen. Felder: Network Name (SSID), Password, Security (Auswahl WPA/WPA2, WEP oder None (Open)) und der Schalter Hidden network für versteckte Netze. Daraus entsteht die Standard-Zeichenkette im Format:

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

Sonderzeichen in SSID und Passwort (\ ; : ") werden korrekt escaped. 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). Leer gelassene Felder werden weggelassen; Vor- und Nachname füllen sowohl die strukturierte Zeile N: als auch den Anzeigenamen FN:.

Email

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

SMS

Erzeugt einen smsto:-Eintrag aus Phone Number und Message. Ein Scan öffnet die SMS-App mit Empfänger und Text. Das Ergebnis hat die Form smsto:<Nummer>:<Nachricht>.

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). Weil der Code intern ein Vektor ist, betrifft diese Zahl nur die Rasterexporte (PNG/JPEG/WebP) — die SVG-Datei skaliert verlustfrei.

Rand (Margin)

Margin (Pixels) ist der Rand (die Quiet Zone) rund um den Code, 0 bis 200 Pixel, Voreinstellung 0. Ein ausreichender heller Rand ist Teil der QR-Spezifikation und wichtig fürs Scannen — siehe Tipps & Tricks.

QR-Form (QR Shape)

QR Shape wählt die Gesamtform: Square (quadratisch, Voreinstellung) oder Circle (kreisförmig zugeschnitten).

Fehlerkorrektur (Error Correction)

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

Stufe	Wiederherstellung	Wann sinnvoll
Low (L)	~ 7 %	sauberes Display, maximale Kapazität
Medium (M)	~ 15 %	Standard (Voreinstellung)
Quartile (Q)	~ 25 %	Druck, Logo in der Mitte
High (H)	~ 30 %	raue Umgebung, Logo, Außeneinsatz

Höhere Stufen kosten Kapazität: Derselbe Inhalt braucht in H einen dichteren Code als in L. 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 und bietet 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 %) zur Verfügung, der die Außenecken des Hintergrunds abrundet.

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 skaliert automatisch mit Code- und Logogröße, damit das Bild nicht negativ groß wird.
• 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. Der Knopf mit dem Papierkorb-Symbol 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

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 (ein transparenter Hintergrund wird gefüllt).

Alle Rasterformate entstehen in der unter Size gewählten Pixelgröße. Die Datei heißt jeweils qrcode.<endung>.

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.

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.
• Vektor zuerst: Intern ist jeder Code ein SVG; Rasterformate werden daraus erzeugt.
• Live-Vorschau: Änderungen werden leicht verzögert übernommen, damit das Tippen flüssig bleibt.
• 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.