NPM module to create QR Codes with a logo like these...
yarn add branded-qr-code babel-polyfill
// ESNext Modules
import 'babel-polyfill';
import brandedQRCode from 'branded-qr-code';
// Or old good syntax
// require('babel-polyfill');
// var brandedQRCode = require('branded-qr-code');
// Return a buffer with the PNG of the code
brandedQRCode.generate({text: 'https://www.google.com', path: 'mylogo.png'});
// For express if you need different logos:
app.get('/qr/:logo', route({ getLogoPath: req => `../images/original/${req.params.logo}.png` }));
Standard express server - Check the demo with npm run demo
. Try localhost:3000/qr/twitter?t=www.twitter.com
.
Batch Processing - Check the demo with npm run demo-generate
. Files are saved in demos/generate/output
.
// Return a Buffer with the QRCode's PNG
brandedQRCode.generate( opts )
opts
:
text
: text for the QR code.path
: path of the logo.ratio
: The QR code width and height will be 1/ratio
of the QRcode image size (default 2
).ignoreCache
: Ignore the cached images (default: false
).opt
: Options for npm qrcode
module (defaults: { errorCorrectionLevel: 'M', margin: 2 }
).// Return an express route that serves the QRCode's PNG
brandedQRCode.route( opts )
opts
:
text
: Text in the QR code. It is only used if getText
is falsy. If you want to return QR code with dynamic text you will not use this.getText
: Function that returns the text in the QRcode. It receives the req
object (default req => req.query.t
). It can return a promise.logoPath
: Path to the image to be added in the center of the QRcode. It is only used if getLogoPath
is falsy.getLogoPath
: Function that returns the path of the logo. It receives the req
object.getRatio
: Function that returns the ratio
to use. It receives the req
object.getLogoPath
: Function that returns the text to be put in the QRcode. It receives the req
object. It can return a promise.ignoreCache
: Ignore the cached images (default: false
).qrOpt
: Options for npm qrcode
module (defaults: { errorCorrectionLevel: 'M', margin: 2 }
).getQrOpt
: Function that returns the qrOpt. It receives the req
object. It can return a promise.maxAge
: The cache header to be added. false
means no cache. Default 31557600 (1 year).onError
: function(req, res, err)
called in case of an error. The default function log the error and return a 404.There are some /scripts
that can help you to create a better looking logos adding some white margin around it.
Just place your logo in /images/original
and then, run in order:
You will find your logo nicely padded in /images/final
The logo at the center of the QRcode is actually adding noise. The QR code can still be decoded because QR codes have redundant data that readers' error correction algorithms can use. The npm qrcode
library supports different levels. Higher levels produce denser the QR codes. From empirical tests you can noticed that using Low (L
) usually produces QR codes that are NOT READABLE. Medium (M
) is the default
and it is usually sufficient. If you have problems, you may want to use quartile (Q
) or high (H
). You can do it with { errorCorrectionLevel: 'Q' }
.
import
/export
)./dist
..spec.js
files.--fix
so you do not waste time)..nvmrc
.npm publish
run test and build the repo.npm run debugTest
(use with chrome://inspect
).watch:test
(use it while you develop!)npm run cover
and HTML report in the browser with npm run coverHTML