Sie sind nicht schön anzusehen, nehmen oft zu viel Platz auf Visitenkarten ein und sind dennoch aus dem Alltag kaum wegzudenken. Man findet sie auf Verpackungen, Sticker, Eintrittskarten, Werbebannern und unzähligen weiteren Dingen. Die Rede ist natürlich von QR-Codes, die kleinen pixelartigen Vierecke sind eine Brücke zwischen der analogen und der digitalen Welt. Fast jedes moderne Smartphone oder Tablet kann heute ganz ohne extra App QR-Codes mit der Kamera scannen.
Obwohl uns QR-Codes täglich begegnen und fester Bestandteil unserer Welt sind, können leider nur wenige Programme QR-Codes erzeugen. Die einfachste Lösung ist meistens ein kostenloser Online-Generator. Aber was passiert mit den Daten, die man in so einen Generator einträgt? Nicht jeden Link möchte man öffentlich in einer Datenbank haben. Links zur eigenen Cloud oder firmeninterne Links sind zum Beispiel solche Anwendungsfälle. Wäre es da nicht toll, wenn man einen QR-Code-Generator hätte, dem man vertrauen kann? Die Lösung ist einfach, mit jQuery wollen wir heute einen QR-Code Generator bauen, der uns gehört!
01. Basics
In dieser Anleitung arbeiten wir mit dem Github Projekt „jquery.qrcode.js„. Das auf jQuery basierende Script erstellt auf einfache Art und Weise QR-Codes. Allerdings auch nicht mehr. Das Script hat keine Exportfunktion und eine Bedienung über Input Felder ist standardmäßig auch nicht vorgesehen. Perfekt, damit haben wir ein gutes Basisscript auf welchem wir aufbauen können, ohne uns Gedanken machen zu müssen wie ein QR-Code genau errechnet wird.
02. jquery.qrcode.js
Als Erstes wollen wir die grundsätzliche Bedienung von „jquery.qrcode.js“ durchgehen. In diesem Abschnitt erstellen wir einen QR-Code, wie es auch die Doku von „jquery.qrcode.js“ vorsieht. Wir binden jQuery und „jquery.qrcode.js“ in unser HTML Dokument ein und geben alle Parameter ein. Im div Tag „output“ wird nun ein Canvas Element erzeugt, das einen QR-Code zeigt.
Basics
03. QR-Code Generator mit Bootstrap
Damit unser QR-Code-Generator auch gut aussieht, verwenden wir Bootstrap 5.2 als CSS Framework. Wir platzieren ein Input-Feld in unserem HTML Dokument, in das wir Text eintragen können. Mit einem Klick auf den Button „Go!“ soll das Script starten und den Text zu einem QR-Code umwandeln. Da mit jedem Klick auf den Button „Go!“ ein neues Canvas erstellt wird, bestehende QR-Codes aber nicht ersetzt werden, müssen wir den div Tag „output“ zurücksetzen. Das machen wir mit „empty()“ gleich als Erstes, nachdem der Button gedrückt wurde.
Anschließend erzeugen wir schon den QR-Code in der gewünschten Größe. Natürlich wollen wir die erzeugte Grafik jetzt auch herunterladen können. Dafür nutzen wir „canvas.toDataURL“, damit wird das gerade erstellte Canvas zu einem „PNG“ oder „JPG“ Bild umgewandelt. Der Download funktioniert somit auch erst, wenn ein QR-Code erstellt wurde. Um zu verhindern, dass jede Datei denselben Namen hat, bauen wir noch eine vierstellige Zufallszahl ein.
Und fertig ist der eigene QR-Code-Generator.
QR-Code Generator
☺
jQuery(function(){
$('#go').on('click', function() {
var url = $("#qrlink").val();
if ($("#qrlink").val().length > 0) {
$("#output").empty();
if ($("#small").prop("checked")) {
var size = 120
}
else {
var size = 220
}
jQuery('#output').qrcode({
width: size,
height: size,
text: url
});
var canvas = document.querySelector("#output canvas");
var png = canvas.toDataURL("image/png");
var jpg = canvas.toDataURL("image/jpeg");
var random = Math.round(Math.random() * 9000 - 1000);
$('#export-png').on('click', function() {
var dl = document.createElement('a');
dl.setAttribute('href', png);
dl.setAttribute('download', 'qrcode-' + random + '.png');
dl.click();
});
$('#export-jpg').on('click', function() {
var dl = document.createElement('a');
dl.setAttribute('href', jpg);
dl.setAttribute('download', 'qrcode-' + random + '.jpg');
dl.click();
});
}
else {
$('#qrlink').attr('placeholder','Bitte URL hier eintragen');
$('#qrlink').focus();
}
});
})
$("#cleaner").on('click', function() {
$("#qrlink").val("");
$("#output").empty();
location.reload(true);
});
04. Download
Ich habe alle Files dieser Anleitung zusammengestellt, damit das Einrichten nochmal etwas schneller von der Hand geht. Ich hoffe, ihr habt genauso viel Spaß mit dem Projekt wie ich und jetzt wünsche ich euch gutes Gelingen.
