How to create QR Code using jquery

Hello Friends, I am here with new tutorial about creating QR code using jquery, You might have listen about QR code, QR (Quick Response) Codes are a type of two-dimensional bar code that can be read using smart phones and dedicated QR reading devices, that link directly to text, emails, websites, phone numbers and more!



If you have visiting card want to add name, company name, email, mobile number, website or any available information on visiting card on your smart phone then it is hard to type manually, For that purpose we can create QR Code of visiting card and scan Qr Code by smart phone, with in second all information of V Card will be saved in your smart phone, There is lot’s of Qr Code reader apps available over Internet. Some companies using QR code to proving extra security while user log-in on their panel. At that time of login you’ll see QR code image which you have to scan with your smart phone and you’ll see a secret pin which you need enter to access their panel.
online-qr-code-generator
In this tutorial i am going to use jquery.qrcode.js library to generate QR code, It is very simple and easy to use library for making QR Codes.

First of all include jquery core library, after that add jquery.qrcode.js library on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

Add QR Code div on page where you want to display QR Code.

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

After that call jquery function to generate QR Code.

$(function() {
  $('#qrcode').qrcode({width: 200,height: 200,text: "Rohit Kumar (My Public Notebook)"});
});

In the above function you have to pass three parameter width, height and text which you want to embed on QR image.

See live demo and download full source code.

DEMO

DOWNLOAD



If you like this post please don’t forget to subscribe my public notebook for more useful stuff

3 Replies to “How to create QR Code using jquery”

  1. hello Sir,
    Very Nice QR Code Maker but how to add icon in QR Code image in Center…

    Please Create new QR Code Maker and Add icon..

    Please..Please..Please..Please..

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.