Generate QR Codes with Logos using JavaScript

QR Code Generator With Logo And Title Support

Introduction

EasyQRCodeJS is a versatile QR code generator that works across different web browsers. It is a client-side solution that allows you to generate QR codes with custom logos and titles.

How to Use EasyQRCodeJS

To start using EasyQRCodeJS, follow these steps:

  1. Install the package by running the command below in your terminal:
NPM $ npm install easyqrcodejs -save
  1. Import the EasyQRCodeJS library into your HTML document.
<script src="easy.qrcode.js"></script>
  1. Create a container element where you want to display the QR code.
<div id="qrcode"></div>
  1. Generate a basic QR code with a default URL.
var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://cssscript.com" });
  1. Customize the QR code by adding a logo.
var qrcode = new QRCode(document.getElementById("qrcode"), { 
  text: "https://cssscript.com", 
  logo: "logo.png", 
  logoWidth: undefined, 
  logoHeight: undefined, 
  logoBackgroundColor: '#ffffff', 
  logoBackgroundTransparent: false 
});
  1. Enhance the QR code with a custom title and subtitle.
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, 
});
  1. Modify the appearance of the QR code to suit your needs.
var qrcode = new QRCode(document.getElementById("qrcode"), { 
  width: 256, 
  height: 256, 
  typeNumber: 4, 
  colorDark: "#000000", 
  colorLight: "#ffffff", 
  correctLevel: QRErrorCorrectLevel.H, 
  quietZone: 0, 
  quietZoneColor: 'transparent', 
  PO: undefined, 
  PI: undefined, 
  PO_TL: undefined, 
  PI_TL: undefined, 
  PO_TR: undefined, 
  PI_TR: undefined, 
  PO_BL: undefined, 
  PI_BL: undefined, 
  AO: undefined, 
  AI: undefined, 
  timing: undefined, 
  timing_H: undefined, 
  timing_V: undefined, 
  backgroundImage: undefined, 
  backgroundImageAlpha: 1, 
  autoColor: false, 
  autoColorDark: "rgba(0, 0, 0, .6)", 
  autoColorLight: "rgba(255, 255, 255, .7)", 
  dotScale: 1, 
  version: 0, 
  tooltip: false, 
  binary: false, 
  drawer: 'canvas', 
  crossOrigin: null 
});
  1. Clear the QR code if you no longer need it.
qrcode.clear();
  1. Re-generate a new QR code with different content.
qrcode.makeCode("New Content Here");
  1. Resize the QR code according to your requirements.
qrcode.resize(460, 460);

Changelog

Here are the recent updates made to EasyQRCodeJS:

  • Version 4.4.13 (09/06/2022)

    • Updated the width of the title to exclude the quietZone.
  • Version 4.4.12 (06/05/2022)

    • Optimized the height calculation.
  • Version 4.4.9 (12/28/2021)

    • Fixed the autoColor bug.
  • Version 4.4.9 (12/21/2021)

    • General improvement.
  • Version 4.4.6 (08/29/2021)

    • Fixed the issue of object logging to the console.
  • Version 4.4.5 (08/19/2021)

    • Fixed the bug in the resize() function.
  • Version 4.4.4 (08/13/2021)

    • General update.
See also  JavaScript Security: Protecting Against Vulnerabilities

For a complete list of changes, please refer to the official documentation.

Remember to stay up-to-date with the latest version to enjoy the newest features and enhancements.

Conclusion

With EasyQRCodeJS, you can effortlessly generate QR codes with custom logos and titles. Whether you need to promote your website or create innovative marketing campaigns, this JavaScript library offers a straightforward and flexible solution.

To learn more about EasyQRCodeJS and explore additional functionalities, visit the official ProgramMatek website.

Give it a try today and start adding QR codes to your web applications!