Genera codice QR con Javascript

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 codice QR con javascript utilizzando una libreria gratuita, appositamente studiata, per generare il famosissimo e utilizzatissimo codice QR.

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 codice QR. Ma vediamo nel dettaglio cos’è e come può esserti utile.

Il Codice QR, è 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 codice QR memorizza una quantità minore di informazioni. In figura sono raffigurati entrambi i codici.

codice qr con codice a barre

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 Codice QR, difficilmente ci troviamo nella condizione di generarlo. In ogni caso, generare codice QR è 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 codice QR. 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

In questa guida scoprirai come gestire e tenere sempre aggiornate, in un colpo solo, le librerie javascript che gestiscono il Frontend di un progetto software con Bower, un tool gratuito utilizzato per lo sviluppo web.

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.

portale cdns.com

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. Genera codice QR con Javascript

La generazione di Codice QR con questa libreria è di una semplicità disarmante. Infatti, per generare codice 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 codice QR 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:

codice qr con javascript

Se vuoi approfondire l’argomento puoi seguire questo video tutorial su come generare codici QR 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.

Seguimi su

Antonio Lamorgese

Amministratore di rete e programmatore. Dopo anni di esperienza nel settore, ho ideato un generatore di codice PHP Scopri di più su https://www.phpcodewizard.it.

x