How to generate QR Code using jQuery

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 and in this article, we’ll concentrate on how to generate QR code using jquery. QR Codes have become very common in recent times especially among portable devices like tablets and smartphones 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 smartphone 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 an MIT license.

Steps to generate QR code using jQuery

Following are the steps to generate QR code using jQuery. Depending on how you are developing the page, you might have to include the plugins on your page differently. However, the concept remains the same.

Step 1.

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

OR

You can also link to the jQuery file hosted on google Or any other jQuery CDN. You might want to install the latest jquery package using npm if you are using npm in your project to manage packages.

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="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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 include 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.

//Put this code in your js file or wrap it within the <script></script> tags
//Wrap it within $(document).ready() to invoke the function after DOM loads.

$(document).ready(function(){

$('#qrcodeholder').qrcode({
        text    : "https://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

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. 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.

The post How to generate QR Code using jQuery first appeared on MoreOnFew.