QR-Code Generator online erstellen.

So erstellst du in wenigen Schritten einen QR-Code

Erstelle mit meinem 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.

1. Text oder URL in das Eingabefeld oben eintragen
2. Größe auswählen
3. Auf „QR-Code generieren“ klicken
4. Mit „QR-Code herunterladen“ als PNG speichern

Deine Eingaben werden dabei nicht an einen Server übertragen – der QR-Code entsteht komplett in deinem Browser.

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.