QRious is a pure JavaScript library for generating QR codes utilising HTML5 technology.

Originally based on jsqrencode but with cleaner safer code and not to mention a new simple and understandable API.

This library requires HTML5 to work as its <canvas> element is used to render the QR code.

Install

Install using the package manager for your desired environment(s):

$ npm install --save qrious
# OR:
$ bower install --save qrious

You'll need to have at least Node.js installed and you'll only need Bower if you want to install that way instead of using npm.

If you want to simply download the file to be used in the browser you can find them below:

Node.js Dependencies

If you plan on using QRious in the browser then you're good to go!

However, if you plan on using it on a server using Node.js, then you'll find that QRious depends heavily on node-canvas to provide HTML5 canvas support, however, since his library is entirely dependant on Cairo being installed as an external dependency, QRious only has this marked as an optionalDependency. That said; it won't work without it on Node.js. Sorry. Please see their wiki on steps on how to do this on various platforms:

https://github.com/LearnBoost/node-canvas/wiki/_pages

If you are planning on installing QRious through npm for use in the browser, then you can avoid unnecessarily installing the canvas dependency by using the following:

$ npm install --save --no-optional qrious

Examples

In the browser:

<!DOCTYPE html>
<html>
  <body>
    <canvas id="qr"></canvas>

    <script src="/path/to/qrious.js"></script>
    <script>
      (function() {
        const qr = new QRious({
          element: document.getElementById('qr'),
          value: 'https://neocotic.com/qrious'
        })
      })()
    </script>
  </body>
</html>

In Node.js:

const express = require('express')
const QRious = require('qrious')

const app = express()

app.get('/qr', (req, res) => {
  const qr = new QRious({ value: 'https://neocotic.com/qrious' })

  res.end(new Buffer(qr.toDataURL(), 'base64'))
})

app.listen(3000)

Open up demo.html in your browser to play around a bit.

API

Simply create an instance of QRious and you've done most of the work. You can control many aspects of the QR code using the following fields on your instance:

Field Type Description Default
background String Background colour of the QR code "white"
backgroundAlpha Number Background alpha of the QR code 1.0
foreground String Foreground colour of the QR code "black"
foregroundAlpha Number Foreground alpha of the QR code 1.0
level String Error correction level of the QR code (L, M, Q, H) "L"
mime String MIME type used to render the image for the QR code "image/png"
padding Number Padding for the QR code (pixels) null (auto)
size Number Size of the QR code (pixels) 100
value String Value encoded within the QR code ""
const qr = new QRious()
qr.background = '#000'
qr.backgroundAlpha = 0.8
qr.foreground = '#fff'
qr.foregroundAlpha = 0.8
qr.level = 'H'
qr.padding = 25
qr.size = 500
qr.value = 'https://neocotic.com/qrious'

These can also be passed as options to the constructor itself:

const qr = new QRious({
  background: '#000',
  backgroundAlpha: 0.8,
  foreground: '#fff',
  foregroundAlpha: 0.8,
  level: 'H',
  padding: 25,
  size: 500,
  value: 'https://neocotic.com/qrious'
})

You can also pass in an element option to the constructor which can be used to generate the QR code using an existing DOM element. element must either be a <canvas> element or an <img> element which can then be accessed via the canvas or image fields on the instance respectively. An element will be created for whichever one isn't provided or for both if no element is specified, which means that they can be appeneded to the document at a later time.

const qr = new QRious({
  element: document.querySelector('canvas'),
  value: 'https://neocotic.com/qrious'
})

qr.canvas.parentNode.appendChild(qr.image)

A reference to the QRious instance is also stored on both of the elements for convenience.

const canvas = document.querySelector('canvas')
const qr = new QRious({
  element: canvas,
  value: 'https://neocotic.com/qrious'
})

console.log(qr === canvas.qrious)
//=> true

toDataURL([mime])

Generates a base64 encoded data URI for the QR code. If you don't specify a MIME type, it will default to the one passed to the constructor as an option or the default value for the mime option.

const qr = new QRious({
  value: 'https://neocotic.com/qrious'
})

console.log(qr.toDataURL())
//=> "data:image/png;base64,iVBOR...kVrMFhcAW04AAAAASUVORK5CYII="
console.log(qr.toDataURL('image/jpeg'))
//=> "data:image/jpeg;base64,/9j/...AHMn/uNr9VKKKAP5V6KKKAP/2Q=="

VERSION

The current version of QRious.

console.log(QRious.VERSION)
//=> "2.1.0"

What is ECC?

ECC (Error Correction Capacity) levels represent the amount of data that can be restored if the QR code symbol is smudged or damanged. There are four ECC levels ranging from L (smallest) to H (best);

L
Low — Approx. 7% of codewords can be restored
M
Medium — Approx. 15% of codewords can be restored
Q
Quartile — Approx. 25% of codewords can be restored
H
High — Approx. 30% of codewords can be restored

Migrating from v1

If you've been using v1 (qr) then you can find details about what's changed and a guide on how to migrate to v2 (Qrious) below:

https://github.com/neocotic/qrious/wiki/Migrating-from-v1

You can also find the code and documentation for the v1 below:

https://github.com/neocotic/qrious/tree/1.1.4

Changes

Version 2.2.0

  • #63 Add backgroundAlpha and foregroundAlpha options to control transparency
View historical changes

Bugs

If you have any problems with QRious or would like to see changes currently in development you can do so here.

Contributors

If you want to contribute, you're a legend! Information on how you can do so can be found in CONTRIBUTING.md. We want your suggestions and pull requests!

A list of QRious contributors can be found in AUTHORS.md.

License

Copyright © 2016 Alasdair Mercer

See LICENSE.md for more information on our GPLv3 license.