qrcode.es

Introduction
qrCode.js is a web based QrCode generation library in javascript. It extends the functionality of qrcode-generator.
Getting started
npm i qrcode.es
OR
yarn add qrcode.es
Usage
ES6 Modules
import { 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");
const qrCode = new qrcode(element);
await qrCode.generate('https://adactive.com', qrCodeSetting);
let image = this.qrCode.getImage();
Browser
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
width: 100%;
position: relative;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="qrCode"></div>
<script src="../node_modules/qrcode.umd.js"></script>
<script type="application/javascript">
const image = './assets/logo.jpg';
const element = document.getElementById("qrCode");
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>
API
constructor (element: instance of HTMLDivElement | instance of HTMLCanvasElement): qrcode
fucntion generate(text: string, options: Object): Promise
function getImage(): string
Options
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
ecLevel
Name | Level | Error Correction Capability |
---|
LOW | 'L' | ~7% |
MEDIUM | 'M' | ~15% |
QUARTILE | 'Q' | ~25% |
HIGH | 'H' | ~30% |
Modes
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 |
License
MIT License (MIT)
The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
http://www.denso-wave.com/qrcode/faqpatent-e.html
Special Thanks
This library is greatly inspired by Lars Jung, Author of jquery-qrcode.
Thanks to Kazuhiko Arase for original QrCode generation.