Top Related Projects
Cross-browser QRCode generator for javascript
QR Code Generator implementation in JavaScript, Java and more.
qr code generator
High-quality QR Code generator library in Java, TypeScript/JavaScript, Python, Rust, C++, C.
A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.
ZXing ("Zebra Crossing") barcode scanning library for Java, Android
Quick Overview
QRious is a pure JavaScript library for generating QR codes using HTML5 canvas. It provides a simple API for creating QR codes with customizable options, such as size, color, and error correction level. QRious is lightweight and has no external dependencies, making it easy to integrate into web projects.
Pros
- Lightweight and dependency-free
- Easy to use with a simple API
- Supports customization of QR code appearance
- Works in both browser and Node.js environments
Cons
- Limited to generating QR codes only (no scanning functionality)
- May not support some advanced QR code features
- Lacks built-in support for SVG output (canvas-based only)
Code Examples
Creating a basic QR code:
const qr = new QRious({
value: 'https://example.com',
size: 200
});
document.body.appendChild(qr.image);
Customizing QR code appearance:
const qr = new QRious({
value: 'Hello, World!',
size: 250,
background: '#ffffff',
foreground: '#000000',
level: 'H',
padding: 25
});
Generating a data URL for the QR code:
const qr = new QRious({
value: 'QRious is awesome!'
});
const dataURL = qr.toDataURL();
console.log(dataURL);
Getting Started
- Install QRious using npm:
npm install qrious
- Import and use QRious in your project:
import QRious from 'qrious';
const qr = new QRious({
value: 'https://github.com/neocotic/qrious',
size: 300
});
// If in a browser environment
document.body.appendChild(qr.image);
// If in Node.js environment
const fs = require('fs');
fs.writeFileSync('qr-code.png', qr.toDataURL().split(',')[1], 'base64');
This will create a QR code with the specified URL and size, which can be added to the DOM in a browser environment or saved as a PNG file in a Node.js environment.
Competitor Comparisons
Cross-browser QRCode generator for javascript
Pros of qrcodejs
- Simpler API with fewer configuration options, making it easier to use for basic QR code generation
- Smaller file size, which can be beneficial for projects with limited resources
- Supports more legacy browsers, including IE6+
Cons of qrcodejs
- Less actively maintained, with the last update in 2014
- Fewer customization options compared to qrious
- Limited documentation and examples available
Code Comparison
qrcodejs:
var qrcode = new QRCode("qrcode", {
text: "http://example.com",
width: 128,
height: 128
});
qrious:
var qr = new QRious({
element: document.getElementById('qrcode'),
value: 'http://example.com',
size: 128
});
Both libraries offer simple ways to generate QR codes, but qrious provides more advanced features and customization options. qrcodejs is more straightforward and may be suitable for simpler projects, while qrious offers greater flexibility and is actively maintained. The choice between the two depends on the specific requirements of your project and the level of customization needed.
QR Code Generator implementation in JavaScript, Java and more.
Pros of qrcode-generator
- Supports a wider range of output formats, including SVG, PNG, and ASCII
- More comprehensive documentation and examples
- Offers more customization options for QR code appearance
Cons of qrcode-generator
- Larger file size and potentially slower performance
- Less frequent updates and maintenance
- More complex API, which may be harder for beginners to use
Code Comparison
qrcode-generator:
var qr = qrcode(4, 'L');
qr.addData('Hello, World!');
qr.make();
var imgTag = qr.createImgTag(4);
qrious:
var qr = new QRious({
value: 'Hello, World!',
size: 250
});
var dataURL = qr.toDataURL();
Both libraries allow for easy QR code generation, but qrcode-generator requires specifying error correction level and version, while qrious provides a simpler API with sensible defaults. qrcode-generator offers more control over the output format, while qrious focuses on canvas-based rendering and data URL generation.
qr code generator
Pros of node-qrcode
- Supports more output formats (PNG, SVG, terminal, etc.)
- Offers more customization options for QR code generation
- Has better documentation and examples
Cons of node-qrcode
- Larger package size and more dependencies
- Slightly more complex API for basic usage
- May have slower performance for simple QR code generation
Code Comparison
qrious:
var qr = new QRious({
value: 'https://example.com',
size: 250
});
var dataURL = qr.toDataURL();
node-qrcode:
QRCode.toDataURL('https://example.com', { width: 250 }, function (err, url) {
console.log(url);
});
Both libraries provide simple ways to generate QR codes, but node-qrcode offers more flexibility and output options at the cost of a slightly more complex API. qrious is more lightweight and straightforward for basic use cases, while node-qrcode is better suited for projects requiring advanced customization or multiple output formats.
High-quality QR Code generator library in Java, TypeScript/JavaScript, Python, Rust, C++, C.
Pros of QR-Code-generator
- Supports multiple programming languages (Java, TypeScript/JavaScript, Python, C++, Rust)
- Provides more advanced features like error correction level and mask pattern customization
- Offers comprehensive documentation and examples
Cons of QR-Code-generator
- Larger codebase and potentially more complex to integrate
- May have a steeper learning curve for beginners
- Less focused on browser-based usage compared to qrious
Code Comparison
QR-Code-generator (JavaScript):
const qr = qrcodegen.QrCode.encodeText("Hello, world!", qrcodegen.QrCode.Ecc.MEDIUM);
const svg = qr.toSvgString(4);
qrious:
const qr = new QRious({
value: 'Hello, world!',
size: 250
});
const dataURL = qr.toDataURL();
Both libraries allow for easy QR code generation, but QR-Code-generator offers more granular control over the encoding process, while qrious provides a simpler API for quick implementation in web environments.
A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.
Pros of jsQR
- More comprehensive QR code scanning capabilities, including support for various QR code versions and error correction levels
- Better performance for QR code detection and decoding in complex images or video streams
- Actively maintained with regular updates and bug fixes
Cons of jsQR
- Larger file size and potentially higher resource usage
- Steeper learning curve due to more advanced features and options
- May be overkill for simple QR code generation tasks
Code Comparison
jsQR (scanning):
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
console.log("Found QR code", code.data);
}
qrious (generation):
var qr = new QRious({
element: document.getElementById('qr-code'),
value: 'https://example.com'
});
Summary
jsQR is better suited for complex QR code scanning tasks, offering more features and better performance. qrious, on the other hand, is simpler and more lightweight, making it ideal for basic QR code generation. The choice between the two depends on the specific requirements of your project, with jsQR being the preferred option for scanning and qrious for generation.
ZXing ("Zebra Crossing") barcode scanning library for Java, Android
Pros of ZXing
- More comprehensive barcode support (1D and 2D)
- Multi-platform compatibility (Java, Android, iOS)
- Larger community and more frequent updates
Cons of ZXing
- Larger library size, potentially impacting performance
- Steeper learning curve due to more complex API
- May be overkill for simple QR code generation tasks
Code Comparison
ZXing (Java):
BitMatrix bitMatrix = new MultiFormatWriter().encode(
"Hello, World!", BarcodeFormat.QR_CODE, 200, 200);
MatrixToImageWriter.writeToStream(
bitMatrix, "PNG", new FileOutputStream("qr-code.png"));
QRious (JavaScript):
var qr = new QRious({
value: 'Hello, World!',
size: 200
});
var dataURL = qr.toDataURL();
ZXing offers more flexibility and options for encoding, while QRious provides a simpler API for quick QR code generation. ZXing's code demonstrates its multi-format support, whereas QRious focuses solely on QR codes with a more straightforward approach.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
.d88888b. 8888888b. d8b
d88P" "Y88b 888 Y88b Y8P
888 888 888 888
888 888 888 d88P 888 .d88b. 888 888 .d8888b
888 888 8888888P" 888 d88""88b 888 888 88K
888 Y8b 888 888 T88b 888 888 888 888 888 "Y8888b.
Y88b.Y8b88P 888 T88b 888 Y88..88P Y88b 888 X88
"Y888888" 888 T88b 888 "Y88P" "Y88888 88888P'
Y8b
QRious is a pure JavaScript library for generating QR codes using HTML5 canvas.
Install
Install using the package manager for your desired environment(s):
$ npm install --save qrious
# OR:
$ bower install --save qrious
If you want to simply download the file to be used in the browser you can find them below:
- Development Version (71kb - Source Map)
- Production Version (18kb - Source Map)
Check out node-qrious if you want to install it for use within Node.js.
Examples
<!DOCTYPE html>
<html>
<body>
<canvas id="qr"></canvas>
<script src="/path/to/qrious.js"></script>
<script>
(function() {
var qr = new QRious({
element: document.getElementById('qr'),
value: 'https://github.com/neocotic/qrious'
});
})();
</script>
</body>
</html>
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 | Read Only |
---|---|---|---|---|
background | String | Background color of the QR code | "white" | No |
backgroundAlpha | Number | Background alpha of the QR code | 1.0 | No |
element | Element | Element to render the QR code | <canvas> | Yes |
foreground | String | Foreground color of the QR code | "black" | No |
foregroundAlpha | Number | Foreground alpha of the QR code | 1.0 | No |
level | String | Error correction level of the QR code (L, M, Q, H) | "L" | No |
mime | String | MIME type used to render the image for the QR code | "image/png" | No |
padding | Number | Padding for the QR code (pixels) | null (auto) | No |
size | Number | Size of the QR code (pixels) | 100 | No |
value | String | Value encoded within the QR code | "" | No |
var qr = new QRious();
qr.background = 'green';
qr.backgroundAlpha = 0.8;
qr.foreground = 'blue';
qr.foregroundAlpha = 0.8;
qr.level = 'H';
qr.padding = 25;
qr.size = 500;
qr.value = 'https://github.com/neocotic/qrious';
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:
var qr = new QRious();
qr.set({
background: 'green',
backgroundAlpha: 0.8,
foreground: 'blue',
foregroundAlpha: 0.8,
level: 'H',
padding: 25,
size: 500,
value: 'https://github.com/neocotic/qrious'
});
These can also be passed as options to the constructor itself:
var qr = new QRious({
background: 'green',
backgroundAlpha: 0.8,
foreground: 'blue',
foregroundAlpha: 0.8,
level: 'H',
padding: 25,
size: 500,
value: 'https://github.com/neocotic/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, which is the only time that you can specify read only options. 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 appended to the document at a later time.
var qr = new QRious({
element: document.querySelector('canvas'),
value: 'https://github.com/neocotic/qrious'
});
qr.canvas.parentNode.appendChild(qr.image);
A reference to the QRious
instance is also stored on both of the elements for convenience.
var canvas = document.querySelector('canvas');
var qr = new QRious({
element: canvas,
value: 'https://github.com/neocotic/qrious'
});
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.
var qr = new QRious({
value: 'https://github.com/neocotic/qrious'
});
qr.toDataURL();
//=> "data:image/png;base64,iVBOR...AIpqDnseH86KAAAAAElFTkSuQmCC"
qr.toDataURL('image/jpeg');
//=> "data:image/jpeg;base64,/9j/...xqAqIqgKFAAAAAq3RRQAUUUUAf/Z"
Migrating from older versions
If you've been using an older major version and would like details on what's changed and information on how to migrate to the latest major release below:
https://github.com/neocotic/qrious/wiki/Migrating-from-older-versions
Bugs
If you have any problems with QRious or would like to see changes currently in development you can do so here. Core features and issues are maintained separately 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 © 2017 Alasdair Mercer
Copyright © 2010 Tom Zerucha
See LICENSE.md for more information on our GPLv3 license.
Top Related Projects
Cross-browser QRCode generator for javascript
QR Code Generator implementation in JavaScript, Java and more.
qr code generator
High-quality QR Code generator library in Java, TypeScript/JavaScript, Python, Rust, C++, C.
A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.
ZXing ("Zebra Crossing") barcode scanning library for Java, Android
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot