@rjseibane/qrcode

v1.0.0

Published

3 years ago

QR Code Generator

Downloads

0High
0Medium
0Low

rjseibane

qrcode generator image label color es2015 es6 js

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 |

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.