npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

branded-qr-code

v1.3.0

Published

Branded QRcode generation

Downloads

578

Readme

Create branded QRcodes

NPM module to create QR Codes with a logo like these...

callme

apple here mrjs supermanemail

playstation smshere nyancat

our-wifi iphonesonebay

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:

  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