Qrcode.es NPM | npm.io

qrcode.es

license circleCi

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

    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"); //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

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>

        <!-- 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>

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