Der QR Code ist eigentlich eine sehr alte Technologie – sie gibt es seit über 25 Jahre. Nur dank der Corona Pest wurde diese Technik sehr beliebt. Man kann nämlich damit kontaktlos eine Information von einem Ort zum anderen übermitteln. So muss man nicht mehr alte „gruusigi“ Menukarten mehr anfassen sondern kann sie direkt auf seinem Smartphone anschauen. Man kann damit auch kontaktlos abstimmen oder sich irgendwo einwählen oder einfache Kontaktdaten austauschen.

Eine geniale Sache.

Heute möchte ich euch zeigen, dass man auch mit Javascript so QR Codes generieren kann und zwar wirklich sehr einfach.

Video

Javascript Bibliothek

Zuerst muss man die Javascript Erweiterung herunterladen und dann in den gleichen Ordner wie das neue HTML Dokument reinlegen. Hier findet man das Teil auf Github:
https://github.com/davidshimjs/qrcodejs

HTML

Man muss nun 3 Elemente erstellen. Nr 1 ist für den Text-Input der danach zum QR Code umgewandelt werden sollte. Dann einen Button und dann ein Div wo der QR Code angezeigt werden sollte.

1
2
3

<input type="text" id="textinput">
    <button type="submit" onclick="generator()">Generieren</button>
    <div id="output"></div>

Javascript

Hier ist die ganze Javascript Funktion die ich verwendet habe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 function generator () {
 
const textinput = document.getElementById('textinput').value;
const qrcodeoutput = document.getElementById('output');
 
    qrcodeoutput.innerText = "";
 
    new QRCode (qrcodeoutput, {
        text: textinput,
        width: 500,
        height: 500,
        colorDark: '#000',
        colorLight: '#fff'
    });
 
 
 }