Add QR code to the webpage with jquery.qrcode.js

QR code is quick response code that has large storage capacity. It is consist of black and white square box that can be read using smartphones or dedicated QR reading devices to gain access to additional information.

This can be used for advertisement, storing web site URL, information, etc.

In this tutorial, I am using the jquery.qrcode.js plugin to generate custom QR code and embed on the web page.

You can adjust its size, background and foreground color with options.

Add QR code to the webpage with jquery.qrcode.js


Contents

  1. Download and Include
  2. Initialize
  3. Demo 1
  4. Options
  5. Demo 2
  6. Conclusion

 

1. Download and Include

  • Download the library from GitHub.
  • Include jquery.qrcode.js and qrcode.js script with jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-master/src/jquery.qrcode.js"></script>
<script type="text/javascript" src="jquery-qrcode-master/src/qrcode.js"></script>

 

2. Initialize

  • Create a container element.
<div id='qrcode'></div>
  • Call qrcode() method to initialize the library. In the method pass the text or the URL that you want to show after scanning.
jQuery('#qrcode').qrcode("QR code text");

Completed Code

<div id="qrcode"></div>

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-master/src/jquery.qrcode.js"></script>
<script type="text/javascript" src="jquery-qrcode-master/src/qrcode.js"></script>
<script>
 // Initialize
 jQuery('#qrcode').qrcode("QR code text"); 
</script>

 

3. Demo 1

Scan the code.


 

4. Options

Customize default behavior with available options.

Syntax – 

$( selector ).qrcode({
  option-name: value, ...
});

Here, are some options –

  • text – Specify the content that will accessible after scan e.g. text, link, number, etc.
  • width – Set the width. The default value is 256.
  • height – Set the height. The default value is 256.
  • render – It either take table and canvas value to display QR code on the screen. The default value is canvas.
  • typeNumber – Automatic calculation to generate QR code. The default value is -1 and takes value upto 40.
  • background – Set background color. The default value is #ffffff.
  • foreground – Set foreground color. The default value is #000000.

Example

jQuery('#qrcode').qrcode({ 
   width: 200,
   height: 200,
   render : "table", 
   text : "http://makitweb.com"
});

 

5. Demo 2

Scan the code.


 

6. Conclusion

It is lightweight jQuery plugin which allows you to easily embed QR code into your web page. Pass content or link in qrcode() method that you want the user can access after scanning.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *