Create branded QRcodes
NPM module to create QR Codes with a logo like these...
Install
yarn add branded-qr-code babel-polyfill
Use
// 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` }));
Examples
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
.
Syntax
// 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 }
).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.
Utilities
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:
npm run resize
npm run gaussian
npm run finalize
You will find your logo nicely padded in /images/final
More about QRcodes
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' }
.
Development notes:
- Execution with Babel (env preset) in .babelrc. Only compile what is not available. Support for (
import
/export
). - Bundling with rollup in one distribution file (with sourcemaps).
- Building for node 4 with (env preset) in .babelrc-build in
/dist
. - Linting with ESLint (setup your lint in .eslintrc.js - currently set with ebay template).
- Test with JEST
- Test are in
.spec.js
files. - Coverage test enforced (currently 50%) but you can change it in the package.json.
- Pre-commit hook runs tests and linting (with
--fix
so you do not waste time). - Set up node version with nvm in
.nvmrc
. npm publish
run test and build the repo.- Step by step debugging with
npm run debugTest
(use with chrome://inspect
). - Watching tests with
watch:test
(use it while you develop!) - Coverage with
npm run cover
and HTML report in the browser with npm run coverHTML