branded-qr-code
v1.3.0
Published
Branded QRcode generation
Downloads
541
Maintainers
Readme
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 be1/ratio
of the QRcode image size (default2
).ignoreCache
: Ignore the cached images (default:false
).opt
: Options for npmqrcode
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 ifgetText
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 thereq
object (defaultreq => 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 ifgetLogoPath
is falsy.getLogoPath
: Function that returns the path of the logo. It receives thereq
object.getRatio
: Function that returns theratio
to use. It receives thereq
object.getLogoPath
: Function that returns the text to be put in the QRcode. It receives thereq
object. It can return a promise.ignoreCache
: Ignore the cached images (default:false
).qrOpt
: Options for npmqrcode
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:
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.
- Test are in
- 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 withchrome://inspect
). - Watching tests with
watch:test
(use it while you develop!) - Coverage with
npm run cover
and HTML report in the browser withnpm run coverHTML