QR-Code Generator
Einfach QR-Codes online erstellen
Mit meinem kostenlosen QR-Code Generator kannst du schnell und einfach individuelle QR-Codes aus Texten oder URLs erstellen. Wähle aus praktischen Größen (200×200, 512×512, 1024×1024 Pixel) und lade den QR-Code als PNG-Bilddatei herunter, um ihn in deinen Projekten zu verwenden.
Größe auswählen:
QR-Code Generator Tutorial
So integrierst du diesen QR-Code Generator auf deiner eigenen Webseite
Willst du auf deiner Webseite einen einfachen QR-Code Generator bereitstellen? Hier ist eine kurze Schritt-für-Schritt-Anleitung:
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.