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.
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.
Now your code might look similar to the following :
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>
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.
//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,
The above code generates the following QR Code :