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:
Show GDPR Cookie Consent Message with jQuery
jQuery Top Sticky Notification Bar with topper.js
jQuery Floating Back to Top Button with Smooth Scrolling
jQuery Circular Progress Bar with Text Counter
Responsive Pricing Table using Bootstrap
Drag and Drop Pixel Art Generator
Simple Financial Ledger in jQuery
Simple To Do List Using jQuery and CSS
Make Table Columns Resizable with jQuery
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.
It doesnot work when I keep image url … Please help me with this
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' });Hi Mukesh!
Keep your image in the same directory where the plugin file is.
Even I’m facing issue with mode = 3, Did you get solution?
Hi Sumit!
What issue are you facing?
Hello ! I don’t succeed with the image
$("#myQRCode").qrcode({ mode: 3, image: "address-of-image.png" });isn’t working
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", }); };thank you it works
can i download a canvas render with js ?
You’re welcome!
Yes you can download using blob method.
I’m not succedding to scan a Qrcode with a logo