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 |
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.
$("#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.
$("#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.
$("#myQRCode").qrcode({
fill: '#444',
});
|
background |
This option used to define the background color for QR code. Default: null, Type: String.
$("#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
});
|
Similar Code Snippets:

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.

