__
__ _ __ /\_\ ____
/'__`\/\`'__\ \/\ \ /',__\
/\ \L\ \ \ \/__ \ \ \/\__, `\
\ \___, \ \_\\_\_\ \ \/\____/
\/___/\ \/_//_/\ \_\ \/___/
\ \_\ \ \____/
\/_/ \/___/
qr.js is a pure JavaScript library for QR code generation using canvas.
Install using the package manager for your desired environment(s):
# for node.js:
$ npm install qr-js
# OR; for the browser:
$ bower install qr-jsIn the browser:
<html>
<body>
<canvas id="qr-code"></canvas>
<script src="/path/to/qr.min.js"></script>
<script>
qr.canvas({
canvas: document.getElementById('qr-code'),
value: 'http://neocotic.com/qr.js'
});
</script>
</body>
</html>In node.js:
var qr = require('qr-js');
qr.saveSync('http://neocotic.com/qr.js', 'qrcode.png');The following configuration data options are recognised by all of the core API methods (all of which are optional):
| Property | Description | Default |
|---|---|---|
| background | Background colour to be used | #fff |
| canvas | <canvas> element in which the QR code should be rendered |
Creates a new element |
| foreground | Foreground colour to be used | #000 |
| level | ECC (error correction capacity) level to be applied | L |
| size | Module size of the generated QR code | 4 |
| value | Value to be encoded in the generated QR code | "" |
Renders a QR code in an HTML5 <canvas> element for a given value.
// Render the QR code on a newly created canvas element
var canvas = qr.canvas('http://neocotic.com/qr.js');
// Re-render the QR code on an existing element
qr.canvas({
canvas: canvas,
value: 'https://github.com/neocotic/qr.js'
});Renders a QR code in an HTML <img> element for a given value.
// Render the QR code on a newly created img element
var img = qr.image('http://neocotic.com/qr.js');
// Re-render the QR code on an existing element
qr.image({
img: img,
value: 'https://github.com/neocotic/qr.js'
});As well as the Standard Data, this method also accepts the following additional data options:
| Property | Description | Default |
|---|---|---|
| image | <img> element in which the QR code should be rendered |
Creates a new element |
| mime | MIME type to process the QR code image | image/png |
Saves a QR code, which has been rendered for a given value, to the user's file system.
// Render a QR code to a PNG file
qr.save('http://neocotic.com/qr.js', 'qr.png', function(err) {
if (err) throw err;
// ...
});
// Render a QR code to a JPEG file
qr.save({
mime: 'image/jpeg',
path: 'qr.jpg',
value: 'https://github.com/neocotic/qr.js'
}, function(err) {
if (err) throw err;
// ...
});Note: Currently, in the browser, this just does it's best to force a download prompt. We will try to improve on this in the future.
As well as the Standard Data, this method also accepts the following additional data options:
| Property | Description | Default |
|---|---|---|
| mime | MIME type to process the QR code image | image/png |
| path | Path to which the QR code should be saved Ignored in browsers |
Required if not specified as an argument |
Synchronous save(3).
Returns a data URL for rendered QR code. This is a convenient shorthand for dealing with the native
HTMLCanvasElement.prototype.toDataURL function.
console.log(qr.toDataURL('http://neocotic.com/qr.js')); // "data:image/png;base64,iVBORw0KGgoAAAA..."
console.log(qr.toDataURL({
mime: 'image/jpeg',
value: 'https://github.com/neocotic/qr.js'
})); // "data:image/jpeg;base64,/9j/4AAQSkZJRg..."As well as the Standard Data, this method also accepts the following additional data options:
| Property | Description | Default |
|---|---|---|
| mime | MIME type to process the QR code image | image/png |
Returns qr in a no-conflict state, reallocating the qr global variable name to its previous
owner, where possible.
This is really just intended for use within a browser.
<script src="/path/to/conflict-lib.js"></script>
<script src="/path/to/qr.min.js"></script>
<script>
var qrNC = qr.noConflict();
// Conflicting lib works again and use qrNC for this library onwards...
</script>The current version of qr.
console.log(qr.VERSION); // "1.1.0"For browser users; their browser must support the HTML5 canvas element or the API will throw an error immediately.
For node.js users; qr.js heavily depends on node-canvas to support the HTML5 canvas element in the node.js environment. Unfortunately, this library is dependant on Cairo, which is not managed by [npm][]. Before you are able to install qr.js (and it's dependencies), you must have Cairo installed. Please see their wiki on steps on how to do this on various platforms:
https://github.com/LearnBoost/node-canvas/wiki/_pages
If you have any problems with this library or would like to see the changes currently in development you can do so here;
https://github.com/neocotic/qr.js/issues
Take a look at docs/qr.html to get a better understanding of what the code is doing.
If that doesn't help, feel free to follow me on Twitter, @neocotic.
However, if you want more information or examples of using this library please visit the project's homepage;