JavaScript QR code Generator with Logo – jQuery qrcode

The “qrcode” is a JavaScript QR code generator with logo. The plugin comes with 3 modes (normal, image strip and image box) that lets you to easily generate QR code dynamically with custom logo / label and much more.

Plugin Overview

Plugin: qrcode
Author: Lars Jung
Licence: MIT Licence
Published: April 30, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.12.4 or Latest version and Java / JavaScript qrcode Generator 1.4.3 or Latest
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 97 KB

How to Use QR code Generator Plugin

1. Load the jQuery JavaScript library and QR code generator‘s JavaScript file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- QR Code Generator Js -->
<script src="dist/jquery-qrcode.js"></script>

2. Now, create a container (a div element ) with a unique id in which QR code generated.

<div id="myQRCode"></div>

3. After that, initialize the plugin with the QR code’s attributes and done.

 $("#myQRCode").qrcode({ 
    size: 300,
    fill: '#212121',
    text: 'URL goes here',
    mode: 1,
    label: 'Logo Text',
    fontcolor: '#e41b17'
 });

4. If you want to add image logo into QR code, then set up plugin initialization with the mode: 3 and add logo image link. The syntax are as follows.

 $("#myQRCode").qrcode({
    mode: 3,
    image: "address-of-image.png"
 });

Advance Configuration Options for QR code Generator

The following are some advance configuration options to create / customize “JavaScript QR code Generator with Logo”.

render

This option define the rendering type for QR code in which the code will be generated. Default: ‘canvas’, Type: string.
Available Options are: ‘canvas’, ‘image’ or ‘div’

 $("#myQRCode").qrcode({
   render: 'image',
 });
minVersion &
maxVersion

Define the size of minimum and maximum versions of QR code. Default: 1, and 40 respectively. Type: Number.

 $("#myQRCode").qrcode({
  minVersion: 1,
  maxVersion: 40,
 });
ecLevel

Define the code scanning correction level that can be Low, Medium, Quartile and High. Default: ‘L’, Type: String.

Available Options are: ‘L’, ‘M’, ‘Q’ or ‘H’

 $("#myQRCode").qrcode({
   ecLevel: 'M',
 });
left &
top

Define the left and top offset for the QR code position. Default: 0, 0 respectively. Type: Number.

 $("#myQRCode").qrcode({
  left: 0,
  top: 0,
 });

Define the size of QR code in pixels. Default: 200, Type: Number

 $("#myQRCode").qrcode({
   size: 400,
 });
fill

Define the filled color for code. Default: '#000', Type: String.
Available Options: HTML Color Codes.

 $("#myQRCode").qrcode({
   fill: '#444',
 });
background

This option used to define the background color for QR code. Default: null, Type: String.
Available Options are: HTML color code.

 $("#myQRCode").qrcode({
   background: '##FFFF00', //yellow
 });
radius

Define border radius for QR Code in pixels. Default: 0, Type: Number.

 $("#myQRCode").qrcode({
   radius: 6,
 });
quiet

Define the quiet zone in modules. Default: 0, Type: Number.

 $("#myQRCode").qrcode({
   quiet: 0,
 });
mSize,
mPosX &
mPosY

Define the postion for QR code. Default: 0.1, 0.5, and 0.5 respectively.

 $("#myQRCode").qrcode({
  mSize: 0.1,
  mPosX: 0.5,
  mPosY: 0.5
 });