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 using the package manager for your desired environment(s):
If you want to simply download the file to be used in the browser you can find them below:
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
said; it won't work without it on Node.js. Sorry. Please see their wiki on steps on how to do this on various
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:
In the browser:
demo.html in your browser to play around a bit.
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:
|background||String||Background colour of the QR code||
|backgroundAlpha||Number||Background alpha of the QR code||
|foreground||String||Foreground colour of the QR code||
|foregroundAlpha||Number||Foreground alpha of the QR code||
|level||String||Error correction level of the QR code (L, M, Q, H)||
|mime||String||MIME type used to render the image for the QR code||
|padding||Number||Padding for the QR code (pixels)||
|size||Number||Size of the QR code (pixels)||
|value||String||Value encoded within the QR code||
The QR code will automatically update when you change one of these fields, so be wary when you plan on changing lots of fields at the same time. You probably want to make a single call to `set(options)` instead as it will only update the QR code once:
These can also be passed as options to the constructor itself:
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.
must either be a
<canvas> element or an
<img> element which can then be accessed
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.
A reference to the
QRious instance is also stored on both of the elements for convenience.
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
The current version of
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
- Low — Approx. 7% of codewords can be restored
- Medium — Approx. 15% of codewords can be restored
- Quartile — Approx. 25% of codewords can be restored
- 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 (
You can also find the code and documentation for the v1 below:
- #63 Enable setting of multiple properties at once resulting in a single re-render
- #71 Deferring or avoiding ImageRenderer
- #73 Switch to container-based Travis builds for faster boot times
- #75 Change code style to be more contributor-friendly
- #76 Improve download links in README
If you have any problems with QRious or would like to see changes currently in development you can do so here.
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.
Copyright © 2017 Alasdair Mercer
See LICENSE.md for more information on our GPLv3 license.