Generate QR Code With Custom Logo & Label - Jquery - Qrcode

This document describes a jQuery plugin that allows developers to generate QR codes with custom logos and labels. The plugin provides options to customize the QR code such as error correction levels, background colors, image positioning, and more. It also explains how to install and use the plugin on a website by adding it to the page, selecting a container, and configuring plugin options.

Uploaded by

Aldo Reyes

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

24 views6 pages

Generate QR Code With Custom Logo & Label - Jquery - Qrcode

Uploaded by

Aldo Reyes

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 6

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.