# QR — Manual > Vollständige Funktionsbeschreibung des QR-Generators: alle Inhaltstypen, Größe/Rand/Form, Fehlerkorrektur, Punkt- und Eck-Stile, Farbverläufe, Logo und Export. Source: https://www.jpkc.com/db/tools/qr/manual/ Zurück zur Übersicht: [QR](https://www.jpkc.com/db/tools/qr/) · Tool live öffnen: [www.jpkc.com/tools/qr/](https://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:;T:;P:;H:;; ``` 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::`. ## 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](https://www.jpkc.com/db/tools/qr/tips/#rand-nicht-vergessen-die-quiet-zone). ### 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](#mittelbild-logo-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](#farben-single-oder-gradient)), 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.`. ### 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](https://www.jpkc.com/db/tools/qr/). Konkrete Durchläufe stehen in den [Beispielen](https://www.jpkc.com/db/tools/qr/examples/), Strategie und Stolperfallen in den [Tipps & Tricks](https://www.jpkc.com/db/tools/qr/tips/). Ausprobieren kannst du alles im [Tool](https://www.jpkc.com/tools/qr/).