Generare QR Code con Javascript
Generare QR Code con Javascript è semplicissimo. In questo articolo ti illustrerò una libreria gratuita, appositamente studiata, per farlo.
di Antonio Lamorgese
Innanzitutto voglio farti una precisazione, questa volta l’articolo, anche se sarà piuttosto breve, tratterà un argomento molto richiesto e di grande utilità. Ti parlerò, infatti, di come generare QR Code con javascript utilizzando una libreria gratuita, appositamente studiata, per generare il famosissimo QR Code.
Se stati leggendo questa guida, molto probabilmente già sai cos’è il codice QR. Ad ogni modo, è possibile che tu l’abbia già utilizzato ma non sai ancora quanto possa esserti utile il QR Code. Ma vediamo nel dettaglio cos’è e come può esserti utile.
Il QR Code, è una matrice di punti neri disposti su una immagine, di forma quadrata, capace di memorizzare una quantità enorme di informazioni e dati. A differenza del codice a barre, anch’esso ancora molto diffuso, ma che a differenza del QR Code memorizza una quantità minore di informazioni. In figura sono raffigurati entrambi i codici.
Indice del Post...
1. Come è fatto e come funziona il QR Code
Come ho accennato precedentemente un QR Code è formato da un quadrato grafico, che ne include altri quattro agli angoli, questo quadrato grafico contiene una serie di puntini bianchi e neri. Questi puntini rappresentano caratteri numerici e alfanumerici, che possono essere letti e decodificati inquadrando il codice QR con una delle innumerevoli app presenti sui vari store.
Il QR Code più diffuso è quello formato da da 29×29 punti, attraverso i quali è possibile rappresentare fino a 48 caratteri alfanumerici. Questi caratteri possono anche inglobare un link ad una pagina Web, del semplice testo, o qualsiasi altra cosa caratterizzata da caratteri alfanumerici.
Solitamente siamo soliti leggere il QR Code, difficilmente ci troviamo nella condizione di generarlo. In ogni caso, generare QR Code è semplicissimo ed è possibile farlo sfruttando QrCodeJs una libreria opensource scaricabile gratuitamente dal portale CDNJS.
2. Implementazione della libreria QrCodeJs
Ora, vediamo come implementare la libreria e generare il tuo primo QR Code. La libreria in questione è QrCodeJS, una fantastica libreria javascript inclusa totalmente in un unico file e scaricabile dal portale cdnjs.com che, come ho già trattato in un altro articolo, rappresenta il sistema più sicuro per scaricare e includere librerie javascript all’interno di qualsiasi progetto web.
LEGGI ANCHE: Bower: Un gestore di pacchetti per lo sviluppo web professionale
Ora, vediamo nel dettaglio, come procurarci la libreria QrCodeJS e il codice da includere nella nostra pagina html. Per prima cosa, come anticipato precedentemente, devi raggiungere il portale cdnjs cliccando su questo link.
A questo punto come evidenziato in rosso in figura devi cliccare sull’icona raffigurante due parentesi angolari per copiare nella clipboard del PC tutto il codice racchiuso tra i tag <SCRIPT> e </SCRIPT> e incollarlo all’interno del tag <HEAD> di una tua pagina HTML.
Qui è riportato un esempio del codice, da incollare tra i tag HEAD, che include la libreria QrCodeJs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Nel prossimo paragrafo vedremo come implementare i metodi esposti dalla classe QRCode e contenuta all’interno della libreria QrCodeJs.
3. Generare QR Code con Javascript
La generazione di Codici QR con questa libreria è di una semplicità disarmante. Infatti, per generare Codici QR non devi fare altro che invocare queste istruzioni Javascript:
var qrc = new QRCode(document.getElementById("qrcode"), {
text: "https://phpcodewizard.it/",
width: 100,
height: 100,
colorDark: "#000000"
});
Come puoi notare, alla classe QRCode, devi passare 5 parametri:
1) nel primo parametro va indicato l’ID dell’oggetto html, solitamente un DIV, utilizzato per visualizzato il codice QR generato.
2) il parametro text, va inizializzato con la stringa con cui vuoi generare il Codice QR.
3) Il parametro width, rappresenta la larghezza dell’immagine, in pixel, che visualizzerà il Codice QR.
4) Il parametro height, rappresenta l’altezza dell’immagine, in pixel, che visualizzerà il Codice QR.
5) Il parametro colorDark, va inizializzato con il colore, con cui verrà visualizzato il Codice QR.
Ad ogni modo, se vuoi fare pratica con questa libreria, ti riporto di seguito, il codice html per generare QR Code con Javascript.
<!DOCTYPE html>
<html>
<head>
<title>Genera Codice QR</title>
<!-- inclusione della libreria QrCodeJS da cdnjs.com -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
</head>
<body>
<div id="printable">
<p>
Codice QR Generato<br>
utilizzando l'url "https://phpcodewizard.it/" come stringa<br>
per la generazione del codice.
</p>
<div id="qrcode"></div>
</div>
<BR>
<button id="qrprint">STAMPA</button>
<!--
CREA GLI EVENTI PER GENERARE E STAMPARE IL CODICE QR
IN FASE DI CARICAMENTO DELLA PAGINA HTML
-->
<script>
window.addEventListener("load", function(){
// CREA IL CODICE QR
var qrc = new QRCode(document.getElementById("qrcode"), {
text: "https://phpcodewizard.it/",
width: 200,
height: 200,
colorDark: "#000000"
});
// STAMPA IL CODICE QR
document.getElementById("qrprint").addEventListener("click", function(){
var printwin = window.open("");
printwin.document.write(document.getElementById("printable").innerHTML);
printwin.stop();
let qr = printwin.document.querySelector("#qrcode img");
qr.addEventListener("load", function(){
printwin.print();
printwin.close();
});
});
});
</script>
</body>
</html>
Quindi, crea un file con estensione html sul desktop e copia e incolla questo codice all’interno del file html appena creato. Eseguilo con Chrome, o con qualsiasi altro browser, e dovresti vedere visualizzato, all’interno della finestra attiva del browser, questo contenuto:
Se vuoi approfondire l’argomento puoi seguire questo video tutorial su come generare QR Code utilizzando QRCodeJS. Inoltre, potrebbe anche interessarti dare un’occhiata anche alla mia guida su Come sviluppare web app CodeLess con WordPress, PHP e MySQL, dove ti illustro il metodo più efficace per creare web application sfruttando un sistema collaudato e affidabile. Avrai modo, così, di acquisire sempre più autorevolezza nel settore dello sviluppo del software in generale.
Desideri acquisire nuove competenze?
l'opportunità di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online
