Generate QR code in JavaScript quickly

If you are reading this article, then you must be familiar with the QR code. QR code stands for Quick Response code. It is actually a trademark for a type of matrix barcode.

If you are familiar with JavaScript then you may be interested in QR code generation using this programming language on the browser.

Well, you are going to be happy after reading this post, because here, I am going to show you how to Generate QR code in JavaScript with example. So let’s continue to see how you can do it…

QRCode.js JavaScript library

The QRCode.js is a JavaScript library that is available on GitHub. Using this library, you can generate QR code with JavaScript quickly. All you need is to include the QRCode.js file and then use the code that is given below:

<div id="qr_code"></div>
<script type="text/javascript">
    new QRCode(document.getElementById("qr_code"), "http://170.187.134.184");
</script>

In the above code, we are actually creating an object and pass the QR code text.

 

QR code with some options

In the above part of this article, I have just shown the basic usage of the QRcode.js library. But there are lots of more you can do which I am going to let you know.

See the example below first:

<div id="qr_code"></div>
<script type="text/javascript">
       var qrcode = new QRCode(document.getElementById("qr_code"), {
         text: "http://170.187.134.184",
         width: 260,
         height: 260,
         colorDark : "#000000",
         colorLight : "#ffffff",
         correctLevel : QRCode.CorrectLevel.H
       });
</script>

This time we have used configuration options to generate our QR code. We can set width and height, color and correct level for our QR code.

 

Methods of QRcode.js

The Qrcode.js library comes with methods clear() and().

The clear() method can clear the QR code on the page. Below is the usage of this method:

qrcode.clear();

The makeCode() method is able to create the code. Below is its usage:

qrcode.makeCode("http://170.187.134.184");

 

Also, read:

• Adding line breaks in JavaScript alert
• How to change the HTML5 audio player src file in JavaScript

So you have seen how easy was it and how quickly you can generate QR code using the JavaScript library. A special thanks to the coder who build the library to make our task easy.