QR Code Generator With Logo And Title Support – EasyQRCodeJS

Category: Javascript | December 12, 2018
Author: ushelp
Views Total: 731
Official Page: Go to website
Last Update: December 12, 2018
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"
});

Add custom title and subtitle to the QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    title: 'QR Title',
    titleFont: "bold 18px Arial",
    titleColor: "#004284",
    titleBgColor: "#fff",
    titleHeight: 70, 
    titleTop: 25,
    subTitle: 'QR subTitle',
    subTitleFont: "14px Arial", 
    subTitleColor: "#004284",
    subTitleTop: 40
});

Customize the appearance of the QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 256,
    height: 256,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

Remove the QR code.

qrcode.clear();

Re-generate a new QR code.

qrcode.makeCode("New Content Here");

You Might Be Interested In:


Leave a Reply