I QR Code, quei caratteristici barcode bidimensionali che troviamo ormai in diversi contesti della nostra vita quotidiana, si sono enormemente diffusi grazie alla possibilità di essere letti tramite la fotocamera di un comune smartphone. Naturalmente per la codifica e la decodifica di questi codici è necessaria un'apposita applicazione in grado di generare o di interpretare la sequenza di elementi grafici che li costituiscono.
L'implementazione di funzioni di codifica e decodifica di QR Code potrebbe a prima vista sembrare fuori dalla portata di linguaggi come JavaScript. In realtà, sfruttando HTML5 e l'elemento <canvas>, è possibile generare e leggere questo tipo di codice grafico.
In questo articolo vedremo come sfruttare due librerie che ci consentono con estrema semplicità di incorporare la gestione di QR Code nelle nostre applicazioni Web e mobile.
Generare QR Code
Per la generazione di QR Code utilizzeremo la libreria jquery.qrcode.js, un plugin jQuery basato sulla libreria QR Code.js. Il plugin funge da wrapper alla libreria originaria, pertanto se non vogliamo utilizzare jQuery nel nostro progetto, possiamo utilizzare direttamente qrcode.js. Il plugin, tuttavia rende estremamente semplice la generazione di un QR Code.
È sufficiente, infatti, includerlo nella pagina HTML in cui vogliamo inserire il codice, come mostrato di seguito:
<script type="text/javascript" src="jquery.qrcode.min.js"></script>inserire nel corpo della pagina un elemento, come ad esempio un <div>, che conterrà l'immagine generata:
<div id="qrcode"></div>generare il codice con un'istruzione analoga alla seguente:
$("#qrcode").qrcode("HTML.it");per ottenere il seguente risultato:
L'immagine visualizzata è la codifica della stringa "HTML.it". È possibile specificare alcune opzioni per il controllo della generazione del QR Code passando un oggetto JSON come nel seguente esempio:
$("#qrcode").qrcode({ text: "HTML.it",
render: "table",
width: 128,
height: 128
});In questo caso viene specificato di codificare il testo "HTML.it" generando una tabella HTML di dimensioni 128x128 pixel al posto di un'immagine. Altre possibili opzioni consentono di specificare maggiori dettagli tecnici come il tipo di codifica (typeNumber) ed il livello di correzione (correctLevel).
Leggere QR Code
Per la decodifica di un QR Code utilizziamo la libreria jsqrcode, un porting in JavaScript del noto QR Code scanner open source ZXing. Il codice non compresso presente nel repository di GitHub è frammentato in diversi moduli, ma è possibile utilizzare una versione compatta della libreria dal peso di poco più di 40 KB.
Anche in questo caso la decodifica del QR Code è abbastanza semplice. È sufficiente includere la libreria nella pagina HTML
<script type="text/javascript" src="llqrcode.js"></script>per avere accesso all'oggetto 'qrcode'. Questo oggetto mette a disposizione il metodo decode(), che prevede come parametro l'URL dell'immagine da decodificare, e la possibilità di specificare una funzione di callback a decodifica avvenuta.
Il seguente codice mostra come decodificare l'immagine qrcode.png che si trova nella stessa cartella della pagina corrente:
qrcode.callback = function(data) { alert(data); };
qrcode.decode("qrcode.png");Come si evince dal codice, la funzione di callback riceve nel parametro data il valore risultante dalla decodifica del QR Code, come si vede nell'esempio.
In alternativa all'individuazione dell'immagine da decodificare tramite URL è possibile sfruttare l'elemento <canvas>. In questo caso è necessario creare un <canvas> con ID qr-canvas, che conterrà l'immagine da decodificare, ed invocare il metodo decode() senza argomenti.
Questo approccio, in combinazione con il supporto di accesso ai file di HTML5, permette di creare soluzioni sofisticate come quelle mostrate in Web QR dove è possibile trascinare un file da una cartella del proprio PC sulla pagina Web ottenendo la decodifica del QR Code senza effettuare alcun upload.
In definitiva, grazie ad HTML5 e ad un paio di librerie, la generazione e la decodifica di QR Code tramite JavaScript è piuttosto semplice e ci permette di integrare il supporto dei QR Code sulle pagine Web, ma anche di pensare applicazioni mobile "QR Code-enabled".
