browser-qr-js
Advanced tools
__
__ _ __ /\_\ ____
/'__`\/\`'__\ \/\ \ /',__\
/\ \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-js
In 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 | "" |
canvas([data|value])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'
});
image([data|value])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({
image: 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 |
save([data|value][, path], callback)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 |
saveSync([data|value][, path])Synchronous save(3).
toDataURL([data|value])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 |
noConflict()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>
VERSIONThe current version of qr.
console.log(qr.VERSION); // "1.1.3"
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;
FAQs
Library for QR code generation using canvas (browserify edition)
The npm package browser-qr-js receives a total of 0 weekly downloads. As such, browser-qr-js popularity was classified as not popular.
We found that browser-qr-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.