Author: | robot-bulls |
---|---|
Views Total: | 751 views |
Official Page: | Go to website |
Last Update: | May 19, 2022 |
License: | MIT |
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');