EasyQRCodeJS: QR Code Generator with Logo & Title Support

EasyQRCodeJS: QR Code Generator with Logo & Title Support

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.

1# NPM
2$ npm install easyqrcodejs --save

Import the EasyQRCodeJS into the HTML document.

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

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

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

Generate a basic QR code.

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

Add a custom logo to the QR code.

1var qrcode = new QRCode(document.getElementById("qrcode"), {
2text: "https://www.cssscript.com",
3logo: "logo.png"
4});

Add custom title and subtitle to the QR code.

01var qrcode = new QRCode(document.getElementById("qrcode"), {
02title: 'QR Title',
03titleFont: "bold 18px Arial",
04titleColor: "#004284",
05titleBgColor: "#fff",
06titleHeight: 70,
07titleTop: 25,
08subTitle: 'QR subTitle',
09subTitleFont: "14px Arial",
10subTitleColor: "#004284",
11subTitleTop: 40
12});

Customize the appearance of the QR code.

1var qrcode = new QRCode(document.getElementById("qrcode"), {
2width: 256,
3height: 256,
4colorDark : "#000000",
5colorLight : "#ffffff",
6correctLevel : QRCode.CorrectLevel.H
7});

Remove the QR code.

1qrcode.clear();

Re-generate a new QR code.

1qrcode.makeCode("New Content Here");

Author: ushelp

License: MIT

Demo: Link

Download: Github

Fancy you stumbling on my piece of the internet. Bonjour!

My name is Anmol and I'm the Blogger-In-Chief of this joint & working as the Chief Technology Officer at Azoora, Inc. I'm putting up my views here trying to help creative solopreneurs, developers & designers build their business using the power of websites, apps & social media, this, is, my jam.

If you're looking to start your own online business with a professional high quality website or mobile app, just get in touch. I'd be more than happy to assist.

SKYPE | FACEBOOK | LINKEDIN | TWITTER | EMAIL

7 comments

Leave a Reply to Agustin Allshouse Cancel reply

Your email address will not be published.