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 Preview

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	qrcode
Author:	Lars Jung
Licence:	MIT Licence
Published:	January 12, 2024
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

Demo Download

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’ EXAMPLE $("#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’ EXAMPLE $("#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 EXAMPLE $("#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. EXAMPLE $("#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. EXAMPLE $("#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 });

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

$("#myQRCode").qrcode({ size: 300, fill: '#212121', text: 'https://piehcm.com/', mode: 3, //label: 'Logo Text', //fontcolor: '#e41b17', mode: 3, image: '../../Script/IMG.jpg' });

var img_buffer = new Image(); img_buffer.src = '/path/to/image.jpg'; img_buffer.onload = function() { $('#qrCode').qrcode({ render: 'canvas', mode: 3, mSize: 0.3, mPosX: 0.5, mPosY: 0.5, image: img_buffer, text: "text", }); };

10 thoughts on “JavaScript QR code Generator with Logo – jQuery qrcode”

Mukesh

November 3, 2020 at 3:51 PM

It doesnot work when I keep image url … Please help me with this
Mukesh

November 3, 2020 at 3:58 PM
it didnt worked for me for code 3
```
$("#myQRCode").qrcode({
                    size: 300,
                    fill: '#212121',
                    text: 'https://piehcm.com/',
                    mode: 3,
                    //label: 'Logo Text',
                    //fontcolor: '#e41b17',
                    mode: 3,

                    image: '../../Script/IMG.jpg'
                });
```
- Asif Mughal
  
  November 3, 2020 at 4:57 PM
  
  Hi Mukesh!
  Keep your image in the same directory where the plugin file is.
Sumit

August 12, 2021 at 5:27 PM

Even I’m facing issue with mode = 3, Did you get solution?
- Asif Mughal
  
  August 14, 2021 at 9:50 AM
  
  Hi Sumit!
  What issue are you facing?
Emmanuel

August 20, 2022 at 12:30 AM
Hello ! I don’t succeed with the image
```
 $("#myQRCode").qrcode({
    mode: 3,
    image: "address-of-image.png"
 });
```
isn’t working
- Asif Mughal
  
  August 20, 2022 at 12:49 AM
  Hi Emmanuel!
  
  If you want to set an image inside the QR code, make sure you define the image object in your JavaScript code. You can initialize the plugin as follows:
```
var img_buffer = new Image();
        img_buffer.src = '/path/to/image.jpg';
        img_buffer.onload = function() {
            $('#qrCode').qrcode({
                render: 'canvas',
                mode: 3,
                mSize: 0.3,
                mPosX: 0.5,
                mPosY: 0.5,
                image: img_buffer,
                text: "text",
            });
        };
```
Emmanuel

August 20, 2022 at 3:10 AM

thank you it works

can i download a canvas render with js ?
- Asif Mughal
  
  August 20, 2022 at 8:18 AM
  
  You’re welcome!
  Yes you can download using blob method.
Emmanuel

August 30, 2022 at 9:33 PM

I’m not succedding to scan a Qrcode with a logo