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=""></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.

    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.

    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”.


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’

   render: 'image',
minVersion &

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

  minVersion: 1,
  maxVersion: 40,

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’

   ecLevel: 'M',
left &

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

  left: 0,
  top: 0,

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

   size: 400,

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

   fill: '#444',

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

   background: '##FFFF00', //yellow

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

   radius: 6,

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

   quiet: 0,
mPosX &

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

  mSize: 0.1,
  mPosX: 0.5,
  mPosY: 0.5

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.