Generate QR Code With Custom Logo & Label - jQuery.qrcode
File Size: | 95.2 KB |
---|---|
Views Total: | 36594 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.