Generate QR Code With Custom Logo & Label - jQuery.qrcode

A robust, highly customizable QR code generator which helps you dynamically generate QR codes with custom images (for logos) and labels (for call-to-action text).

More features:

• Canvas, Image, or DIV based QR code.
• 5 error correction levels.
• Border radius.
• Custom background & fill colors.

How to use it:

1. Create a container in which the QR code will be generated.

<div class="demo">
</div>

2. Load jQuery library and the jQuery.qrcode plugin right before the closing body tag.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="dist/jquery-qrcode.js"></script>

3. Call the function on the QR code container and define the content.

$(".demo").qrcode({
   text: 'https://www.jqueryscript.net'
});

4. Add a label to the QR code.

$(".demo").qrcode({

  // 0: normal
  // 1: label strip
  // 2: label box
  mode: 1,
  label: 'jQueryScript.Net',
  fontname: 'sans',
  fontcolor: '#000'
  
});

5. Add a logo image to the QR code.

$(".demo").qrcode({

  // 0: normal
  // 3: image strip
  // 4: image box
  mode: 3,
  image: "/path/to/logo.png"

});

6. More configuration options with default values.

$(".demo").qrcode({

  // 'canvas', 'image' or 'div'
  render: 'canvas',

  // min/max versions
  minVersion: 1,
  maxVersion: 40,

  // error correction level
  // 'L', 'M', 'Q' or 'H'
  ecLevel: 'L',

  // offset in pixels
  left: 0,
  top: 0,

  // size in pixels
  size: 200,

  // code color or image element
  fill: '#000',

  // background color or image element
  background: null,

  // border radius
  radius: 0,

  // quiet zone in modules
  quiet: 0,

  // position options
  mSize: 0.1,
  mPosX: 0.5,
  mPosY: 0.5

});

Changelog:

2022-11-21

• v0.18.0

---

This awesome jQuery plugin is developed by lrsjng. For more Advanced Usages, please check the demo page or visit the official website.