QR Code or the Quick Response Code is a square shaped matrix barcode that contains data encoded within it. QR Codes can be generated using JavaScript or jQuery too. QR Codes have become very common in the recent times especially among portable devices like tablets and smart phones with cameras. It has made it easy to store different types of info in a small box type barcode. I generally find it on products that have their web address stored in the QR Code and as soon as I scan it, my smart phone shows me the web address encoded in it and also shows me a button to go to the embedded url. It can be found on some ID cards too with data stored in different formats like XML or Text etc. Basically QR Codes have become very handy and have become very common over the web.

With QR Codes spreading over the web, many clients ask for QR Codes to be shown on websites so that users can either print it, scan it on their device or save it as an image for future reference. With this advancement, one general question everybody has is “How do we generate a QR Code dynamically ?” Well, there are different ways of doing it but we’ll look into generating QR Code using jQuery.

Did you Know ?

The word “QR Code” is registered trademark of DENSO WAVE INCORPORATED in countries Japan, United States of America, Australia and Europe.

Generating QR Code using  jQuery

Well jQuery does not have an in-built way to do it but Jerome Etienne has written a jQuery plugin which actually is a wrapper around the library written by Kazuhiko Arase (who wrote it in different programming languages). Both were released under MIT licence.

Step 1.

First of all, you’ll have to download the jQuery core file. You can do that from the jQuery’s official website.


You can also link to the jQuery file hosted on google.

Step 2.

Secondly, download and include the jquery.qrcode.min.js file from the GIT Hub page .

Now your code might look similar to the following :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

 Step 3.

Thirdly, create a DOM element like a DIV or a span etc to use as a container for the QR Code generated. We’ll use a DIV in our example.

<div id="qrcodeholder"> </div>

 Step 4.

Lastly, invoke the qrcode plugin function with the parameters and the data you want to encode in the QR Code.

The parameters for the jQuery qrcode plugin includes the text or data you want to encode, the width and height of the QR Code generated and the rendering mode. The render param has two values namely “canvas” and “table”. Table value can be used with browsers that don’t support HTML5 canvas.

<script type="text/javascript">
//Wrap it within $(document).ready() to invoke the function after DOM loads.


		text	: "http://www.moreonfew.com/generate-qr-code-using-jquery",
		render	: "canvas",  // 'canvas' or 'table'. Default value is 'canvas'
		background : "#ffffff",
		foreground : "#000000",
		width : 150,
		height: 150


The above code generates the following QR Code :

QR Code generated using jQuery

QR Code generated using jQuery


Isn’t it very easy to generate the QR Code using  jQuery? Likewise you can also generate QR Code using JavaScript too. Find the appropriate plugin that you can use. However, please do check if the plugin you are using is maintained and updated by its author. Hope you liked this article. Also please do like us on Facebook and Google+. You may also follow us on Twitter for interesting Tips and Tricks. Also please do share the post with your friends if you like it. Share your thoughts.