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: 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

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
 });

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

  1. 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'
                    });
    
    Reply
    • 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",
                  });
              };
      
      Reply

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...