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 }).
  • 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.

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:

1. npm run resize
2. npm run gaussian
3. 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