qrCode.js is a web based QrCode generation library in javascript. It extends the functionality of qrcode-generator.
npm i qrcode.esOR
yarn add qrcode.esimport { qrcode, modes, ecLevel } from 'qrcode.es';
const qrCodeSetting = {
size: 400,
ecLevel: ecLevel.QUARTILE,
minVersion: 8,
background: '#fff',
mode: modes.DRAW_WITH_IMAGE_BOX,
radius: 0.5,
image: 'https://raw.githubusercontent.com/AdactiveSAS/qrcode.js/master/adactiveLogo.jpg',
mSize: 0.15,
};
const element = document.getElementById("qrCode"); //Element must be an instance of HTMLCanvasElement or HTMLDivElement
const qrCode = new qrcode(element); //Initializing the QrCode
await qrCode.generate('https://adactive.com', qrCodeSetting); // Function that generates the QrCode
let image = this.qrCode.getImage(); // Function to get the data Url of the QrCode Image<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
width: 100%;
position: relative;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="qrCode"></div>
<!-- Assuming node_modules is located in parent directory -->
<script src="../node_modules/qrcode.umd.js"></script>
<script type="application/javascript">
const image = './assets/logo.jpg'; // To modify path to the image url
const element = document.getElementById("qrCode"); //Element must be an instance of HTMLCanvasElement or HTMLDivElement
const qrCode = new QrCode.qrcode(element);
const qrCodeSetting = {
size: 400,
ecLevel: QrCode.ecLevel.QUARTILE,
minVersion: 8,
background: '#fff',
mode: QrCode.MODES.DRAW_WITH_IMAGE_BOX,
radius: 0.5,
image: image,
mSize: 0.15,
};
let qrCodeImageUrl = null;
qrCode.generate('https://adactive.com', qrCodeSetting)
.then(() => {
qrCodeImageUrl = qrCode.getImage();
console.log("[IMAGE URL] : ", qrCodeImageUrl);
});
</script>
</body>
</html>constructor (element: instance of HTMLDivElement | instance of HTMLCanvasElement): qrcode
fucntion generate(text: string, options: Object): Promise
function getImage(): string| Name | Type | Default | Description |
|---|---|---|---|
| minVersion | number | 1 | Version Range: Minimum 1* |
| maxVersion | number | 40 | Version Range: Maximum 40* |
| ecLevel | string | 'H' | Error Correction Level* |
| size | number | 500 | Size of QrCode in pixel |
| fill | string | '#000' | Color of Module in Color Code |
| background | string | null | Background color or null for transparent background |
| radius | number | 0 | Corner radius relative to module width: Range from 0.0 to 0.5 |
| quiet | number | 0 | Quiet zone in modules (White border around the QrCode) |
| mode | number | 0 | Mode of QrCode - Refer to the end of table for more information |
| mSize | number | 0.3 | Size of Label or Image |
| mPosX | number | 0.5 | Position of Label or Image on x-Axis |
| mPosY | number | 0.5 | Position of Label or Image on y-Axis |
| fontname | string | 'sans' | Font Name to be used |
| fontcolor | string | '#000' | Font Colour in Color Code |
| label | string | 'no label' | Label used for Mode with Label |
| image | string | null | Image used for Mode with Image |
Modules
QrCode Modules refers to the black and white dots that make up the QrCode.
Version
QrCode version ranges from 1 - 40 where which version has a different number of modules. Each higher version consists of a higher number of modules which allows the QrCode to contain more data.
Error Correction Level (ecLevel)
QR Code has error correction capability to restore data if the code is dirty or damaged. Four error correction levels are available for users to choose according to the operating environment.
##Enums
| Name | Level | Error Correction Capability |
|---|---|---|
| LOW | 'L' | ~7% |
| MEDIUM | 'M' | ~15% |
| QUARTILE | 'Q' | ~25% |
| HIGH | 'H' | ~30% |
| Name | Description |
|---|---|
| NORMAL | To generate a default QrCode |
| DRAW_WITH_LABEL_STRIP | To add a label with a white strip taking the width of the QrCode |
| DRAW_WITH_LABEL_BOX | To add a label base on the length of text on the QrCode |
| DRAW_WITH_IMAGE_STRIP | To add an image with a white strip taking the width of the QrCode |
| DRAW_WITH_IMAGE_BOX | To add an image base on the image width on the QrCode |
MIT License (MIT)
The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
http://www.denso-wave.com/qrcode/faqpatent-e.html
This library is greatly inspired by Lars Jung, Author of jquery-qrcode.
Thanks to Kazuhiko Arase for original QrCode generation.