Generate QR Code With Custom Logo & Label -

jQuery.qrcode
https://www.jqueryscript.net/other/qr-code-logo-label.html

Demo Download
More in this category...
View Recommended Plugins
TOP 100 jQuery Plugins 2022

Chrome, IE8+, FireFox, Opera, Safari#QR Code

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.

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

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

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

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

1 $(".demo").qrcode({
2 text:'https://www.jqueryscript.net'
3 });
4. Add a label to the QR code.
01 $(".demo").qrcode({
02

03 // 0: normal
04 // 1: label strip
05 // 2: label box
06 mode: 1,
07 label:'jQueryScript.Net',
08 fontname:'sans',
09 fontcolor:'#000'
10
11 });
5. Add a logo image to the QR code.
1 $(".demo").qrcode({
2

3 // 0: normal
4 // 3: image strip
5 // 4: image box
6 mode: 3,
7 image:"/path/to/logo.png"
8
9 });
6. More configuration options with default values.
01 $(".demo").qrcode({
02
03 // 'canvas', 'image' or 'div'
04 render:'canvas',

05
06 // min/max versions
07 minVersion: 1,
08 maxVersion: 40,
09
10 // error correction level
11 // 'L', 'M', 'Q' or 'H'
12 ecLevel:'L',

13
14 // offset in pixels
15 left: 0,
16 top: 0,

17
18 // size in pixels
19 size: 200,
20
21 // code color or image element
22 fill:'#000',

23
24 // background color or image element
25 background:null,
26
27 // border radius
28 radius: 0,

29
30 // quiet zone in modules
31 quiet: 0,
32
33 // position options
34 mSize: 0.1,
35 mPosX: 0.5,
36 mPosY: 0.5
 37
38 });

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.

 Prev: Sticky Cookie Consent Bar Plugin - cookieMessage.js

 Next: Inline Image Crop/Resize/Zoom/Pan Plugin - mosaico-cropper

Related jQuery Plugins

Canvas Or Table Based QR Code Generator - jQuery qrcode

jQuery Plugin For BarCode and QR Code Reader - WebCodeCam

Creating A QR Code Containing A URL with jQuery - qrcode

jQuery Plugin For Creating QR Codes On Your Website - ClassyQR

You Might Also Like

Success And Error Notification Plugin - jQuery MessageSystem.js

Retina, Script and Style Loader - Conditionizr

jQuery Based Resize Observer - hwt.jquery.resizeobserver.js

jQuery Plugin for Simple Virtual Keyboard - keypad

Minimal Animated Notification Plugin with jQuery and CSS3 - miniNoty

Html5 sessionStorage Based Age Verification with jQuery - Age Check