QR Code Genereren:
Indien je QR Codes wilt genereren waarbij de code meer dan één karakter bevat, kun je het niet af met een font.
Je zult gebruik moeten maken van een script zoals het onderstaande:
Javascript
Allereerst moet je het qr-code javascript met je webpagina verbinden, gebruik hiervoor een van onderstaande cdn's.
<script src="https://cdn.xonline.nl/qrcode/qrcode.js"></script>
<script src="https://cdn.xonline.nl/qrcode/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
Plaats Bepalen
Vervolgens moet je een plaats op je webpagina bepalen waar de QR Code getoond gaat worden:
<div id="qrcode1"></div>
Script
Met behulp van onderstaand script kun je de QR Code een waarde geven.
<script>
window.addEventListener("load", () => {
var qrc = new QRCode(document.getElementById("qrcode1"), "https://xonline.nl/");
});
</script>
Weergave en Auto Correctie
Je kunt het uiterlijk van de QR Code aanpassen, hieronder een voorbeeld:
<script>
window.addEventListener("load", () => {
var qrc = new QRCode(document.getElementById("qrcode2"), {
text: "https://xonline.nl/",
width: 100,
height: 100,
colorDark: "#ff0000",
colorLight: "#ffffff",
correctLevel : QRCode.CorrectLevel.L
});
});
</script>
4 Correctie Niveau's
Het Correctieniveau ( Zie het voorbeeld hierboven ) maakt het mogelijk om beschadigde QR Codes toch te kunnen lezen.
Niveau L = 7 %
Niveau M = 15 %
Niveau Q = 25 %
Niveau H = 30 %
Een Vcard maken:
Je zou een QR Code kunnen maken die meerdere gegevens bevat:
<script>
window.addEventListener("load", () => {
let card = "BEGIN:VCARD\r\n";
card += "VERSION:3.0\r\n";
card += "FN:Foo Bar\r\n";
card += "TEL;TYPE=home:tel:+31-23-456-789";
card += "EMAIL;TYPE=internet:john@foo.bar";
new QRCode(document.getElementById("qr"), card);
});
</script>