QR Code Generator With Logo And Title Support – EasyQRCodeJS

Category: Javascript | August 12, 2019
Author: ushelp
Views Total: 896
Official Page: Go to website
Last Update: August 12, 2019
License: MIT

Preview:

QR Code Generator With Logo And Title Support – EasyQRCodeJS

Description:

EasyQRCodeJS is a cross-browser, client-side QR code generator that supports custom logo and title.

Based on JavaScript, HTML5 canvas and HTML table. Heavily based on the qrcodejs library.

How to use it:

Install & download.

# NPM
$ npm install easyqrcodejs --save

Import the EasyQRCodeJS into the HTML document.

<script src="easy.qrcode.js"></script>

Create a container in which you want to place the QR code.

<div id="qrcode"></div>

Generate a basic QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://www.cssscript.com"
});

Add a custom logo to the QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://www.cssscript.com",
    logo: "logo.png",
    logoWidth: undefined,
    logoHeight: undefined,
    logoBackgroundColor: '#ffffff',
    logoBackgroundTransparent: false
});

Add custom title and subtitle to the QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    title: "",
    titleFont: "bold 16px Arial",
    titleColor: "#000000",
    titleBackgroundColor: "#ffffff",
    titleHeight: 0,
    titleTop: 30, 

    subTitle: "",
    subTitleFont: "14px Arial",
    subTitleColor: "#4F4F4F",
    subTitleTop: 0,
});

Customize the appearance of the QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 256,
    height: 256,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRErrorCorrectLevel.H,
    // === Posotion Pattern(Eye) Color
    PO: undefined, // Global Posotion Outer color. if not set, the defaut is `colorDark`
    PI: undefined, // Global Posotion Inner color. if not set, the defaut is `colorDark`
    PO_TL: undefined, // Posotion Outer - Top Left 
    PI_TL: undefined, // Posotion Inner - Top Left 
    PO_TR: undefined, // Posotion Outer - Top Right 
    PI_TR: undefined, // Posotion Inner - Top Right 
    PO_BL: undefined, // Posotion Outer - Bottom Left 
    PI_BL: undefined, // Posotion Inner - Bottom Left 

    // === Alignment Color
    AO: undefined, // Alignment Outer. if not set, the defaut is `colorDark`
    AI: undefined, // Alignment Inner. if not set, the defaut is `colorDark`

    // === Timing Pattern Color
    timing: undefined, // Global Timing color. if not set, the defaut is `colorDark`
    timing_H: undefined, // Horizontal timing color
    timing_V: undefined, // Vertical timing color

    // ==== Backgroud Image
    backgroundImage: undefined, // Background Image
    backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. 
    autoColor: false,

    // IE9+ Only
    dotScale: 1
});

Remove the QR code.

qrcode.clear();

Re-generate a new QR code.

qrcode.makeCode("New Content Here");

Changelog:

v3.1.0 (08/12/2019)

  • Support AMD, CMD, CommonJS/Node.js JavaScript modules

v3.0.0 (08/08/2019)

  • Added more options

v2.2.0 (07/19/2019)

  • Added more options

You Might Be Interested In:


Leave a Reply