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.
<!DOCTYPE html>
<html>
<head>
<title>Basics</title>
</head>
<body>
<div id="output"></div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.qrcode.min.js"></script>
<script>
jQuery(function(){
jQuery('#output').qrcode({
width: 220,
height: 220,
text: 'https://theartsblog.de'
});
})
</script>
</body>
</html>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.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR-Code Generator</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">Über</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Menü</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Link1</a></li>
<li><a href="#" class="text-white">Link2</a></li>
<li><a href="#" class="text-white">Link3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="/" class="navbar-brand d-flex align-items-center">
<strong class="ms-2">QR-Code Generator</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<div class="pt-5 pb-2 text-center container">
<div class="row pt-3 pb-2">
<div class="col-lg-6 col-md-8 mx-auto">
<div class="row py-2 d-flex justify-content-center">
<div class="card py-2" style="width: 20rem;">
<div class="card-body">
<div id="output"><i style="font-size: 150px;">☺</i></div>
</div>
<div class="card-body">
<button id="export-png" class="btn btn-primary">PNG</button>
<button id="export-jpg" class="btn btn-primary">JPG</button>
<button id="cleaner" class="btn btn-secondary">↻</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-3 pb-2 bg-light">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-lg-5 col-md-10 text-center">
<div class="form-check form-check-inline mb-3">
<input class="form-check-input" type="radio" name="qrcode-size" id="small">
<label class="form-check-label" for="small">
<h5><span class="badge bg-secondary">120px</span></h5>
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="qrcode-size" id="big" checked>
<label class="form-check-label" for="big">
<h5><span class="badge bg-secondary">220px</span></h5>
</label>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control form-control-lg" id="qrlink" placeholder="https://" aria-label="URL" aria-describedby="URL">
<button class="btn btn-lg btn-outline-secondary" type="submit" id="go">Go!</button>
</div>
</div>
</div>
</div>
</div>
<footer class="text-muted text-center container py-5">
<b>jquery.qrcode.js | jQuery 3.6.0 | Bootstrap 5.2</b>
<div class="text-muted mt-3"><a href="https://theartsblog.de">ArtsBlog</a></div>
</footer>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.qrcode.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>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.
