Customizable QR Code Generator With JavaScript And Canvas – qrious

Preview:

Description:

As you might have noticed, QR codes are popping out everywhere these days. There are numerous libraries and platform-specific SDKs that enable you to generate these barcodes with varying flexibility, but none of them is cross-platform — or even language-agnostic — enough to be suitable for a universal implementation. That’s why qrious JavaScript library was built.

Qrious.js is a JavaScript library that generates customizable QR codes using plain JavaScript and HTML5 canvas. It is completely written in JavaScript with no third-party libraries like jQuery. It is lightweight, it has a flexible API, and it can be easily customized to your needs.

How to use it:

1. Install & download.

# Yarn
$ yarn add qrious
# NPM
$ npm i qrious

2. Import the qrious library.

<script src="./dist/qrious.js"></script>

3. Create an empty <img> for the generated QR code. The library will apply the data URL from the rendered canvas element as the src for that img element being rendered.

<img id="qrious" />

4. Initialize the QR Code Generator and define the value encoded within the QR code.

var qr = new QRious({
    element: document.getElementById('qr'),
    value: 'https://www.cssscript.com/'
});

5. Customize the QR code.

var qr = new QRious({
    element: document.getElementById('qr'),
    value: 'https://www.cssscript.com/',
    background: 'white',
    backgroundAlpha: 1.0,
    foreground: 'black',
    foregroundAlpha: 1.0,
    level: 'L', // L, M, Q, H
    padding: null,
    size: 100,
    mime: 'image/png', // MIME type
});

// OR
// qr.OPTION = VALUE;
qr.background = 'red';

6. Get the base64 encoded data URI.

qr.toDataURL();
qr.toDataURL('image/jpeg');