Was ist ein QR-Code und wofür wird er verwendet?

Ein QR-Code (Quick Response Code) ist ein zweidimensionaler Barcode, der Informationen wie URLs, Texte oder Kontaktdaten speichern kann. Er wird häufig genutzt, um Nutzer schnell auf Webseiten, Produktinfos oder andere digitale Inhalte weiterzuleiten.

Welche Inhalte kann ich mit einem QR-Code darstellen?

QR-Codes eignen sich vor allem für Webseiten, kurze Texte, Kontaktdaten oder Verweise auf digitale Inhalte. Wichtig ist, dass die Zielinformation schnell und einfach per Scan erreichbar ist.

Kann ich den QR-Code in verschiedenen Größen erstellen?

Ja, du kannst zwischen mehreren Größen wie 200×200, 512×512 und 1024×1024 Pixel wählen. Das sorgt dafür, dass der QR-Code optimal für unterschiedliche Druckformate und Bildschirme geeignet ist.

Wie lade ich den generierten QR-Code als Bilddatei herunter?

Nach der Generierung des QR-Codes kannst du auf den Download-Button klicken, um den QR-Code als PNG-Bild auf deinem Gerät zu speichern. Dies ermöglicht dir die einfache Verwendung auf Flyern, Webseiten oder Social Media.

Ist der QR-Code Generator auch auf dem Smartphone nutzbar?

Ja, der QR-Code Generator funktioniert direkt im Browser und lässt sich auch auf mobilen Geräten verwenden. So kannst du QR-Codes auch unterwegs schnell erstellen.

Kann ich den QR-Code optisch anpassen?

Je nach Einbindung lassen sich Größe und Darstellung des QR-Codes anpassen. Für eine gute Lesbarkeit sollte der Kontrast jedoch hoch bleiben.

Home » Webdesign lernen » QR-Code Generator

QR-Code Generator online erstellen

So erstellst du in wenigen Schritten einen QR-Code

Erstelle mit unserem kostenlosen QR-Code Generator in wenigen Sekunden QR-Codes aus Text, URLs, Kontaktdaten oder anderen Informationen. Das Tool ist ohne Anmeldung nutzbar und sofort einsatzbereit. Wähle eine passende Größe zwischen 200×200, 512×512 und 1024×1024 Pixel, generiere den Code direkt im Browser und lade ihn anschließend als PNG-Datei herunter.

Text oder URL eingeben

Größe auswählen:

Tutorial: QR-Code Generator in eigene Webseite einbauen

Möchtest du einen eigenen QR-Code Generator auf deiner Webseite integrieren? Mit HTML, JavaScript und der QRCode.js-Bibliothek geht das ganz einfach. Im folgenden Tutorial zeige ich dir Schritt für Schritt, wie du das Tool einbindest und an deine Website anpasst.

1. HTML-Code einfügen

Füge diesen HTML-Code an die Stelle in deiner Webseite ein, wo das Eingabefeld, der Button und der Bereich für den QR-Code angezeigt werden sollen:

<input type="text" id="text" placeholder="Text oder URL eingeben" style="width:300px;" />
<button id="generate">QR-Code generieren</button>
<div id="qrcode" style="margin-top:20px;"></div>

2. QRCode.js Bibliothek einbinden

Integriere diese JavaScript-Bibliothek im <head> oder am Ende des <body>, um QR-Codes generieren zu können:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

3. JavaScript für die Logik hinzufügen

Füge folgenden JavaScript-Code hinzu, um den QR-Code beim Klick auf den Button zu erzeugen:

const qrcodeDiv = document.getElementById('qrcode');
const generateBtn = document.getElementById('generate');

generateBtn.addEventListener('click', () => {
    const text = document.getElementById('text').value.trim();
    qrcodeDiv.innerHTML = ''; // vorherigen QR-Code entfernen
    if(text) {
        new QRCode(qrcodeDiv, {
            text: text,
            width: 200,
            height: 200,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
    } else {
        alert('Bitte gib einen Text oder eine URL ein.');
    }
});

4. Fertig!

Speichere deine Webseite und lade sie im Browser. Jetzt kannst du den QR-Code Generator nutzen und beliebige Texte oder URLs in QR-Codes umwandeln.
Wenn du die Größe des QR-Codes anpassen möchtest, kannst du die Werte width und height im JavaScript-Code verändern.

Mit diesem einfachen Aufbau lässt sich der QR-Code Generator schnell in eine Webseite integrieren und bei Bedarf an eigene Anforderungen anpassen. So entsteht eine praktische Lösung, mit der sich QR-Codes direkt im Browser erstellen und weiterverwenden lassen.