In questo articolo vedremo come creare un QR code in ExpressJS.
Installiamo il package NPM richiesto.
npm install qrcode --save
Questo modulo può creare file PNG sia come URL di dati che come file veri e propri. Definiamo quindi una funzione di utility per la gestione dei file.
'use strict';
const fs = require('fs');
const util = require('util');
const exists = util.promisify(fs.access);
module.exports = {
fileExists(path) {
return new Promise((resolve, reject) => {
exists(path, fs.F_OK).then(ok => {
resolve(true);
}).catch(err => {
resolve(false);
});
});
}
};
Definiamo quindi una route con una logica condizionale: se la richiesta GET viene effettuata con AJAX, viene generato un URL di dati, altrimenti viene servito il file PNG creato.
'use strict';
const fs = require('fs');
const path = require('path');
const express = require('express');
const QRCode = require('qrcode');
const utils = require('./utils');
const app = express();
const port = process.env.PORT || 3000;
app.disable('x-powered-by');
app.use('/public', express.static(path.join(__dirname, 'public')));
app.get('/qrcode', async (req, res) => {
try {
const qrCodeText = 'https://site.tld';
if(req.xhr) {
const url = await QRCode.toDataURL(qrCodeText);
res.json({url});
} else {
const src = './public/images/qrcode.png';
const exists = await utils.fileExists(src);
if(!exists) {
const stream = fs.createWriteStream(src);
const code = await QRCode.toFileStream(stream, qrCodeText);
}
res.sendFile(src);
}
} catch(err) {
res.json(err);
}
});
app.listen(port);
Un uso tipico della modalità AJAX è quello che prevede che il QR code venga visualizzato in modo asincrono come nel seguente esempio.
"use strict";
$(function() {
$.get( "/qrcode", function( response ) {
$( "#qrcode-image" ).attr( "src", response.url ).show();
});
});