logo

,

Generate and Download QR Code using Javascript

In this article, we will learn how to generate QR Code using Javascript, and download the generated QR Code in .jpg format.

QR codes are two-dimensional barcodes that can be scanned by smartphones and other devices. QR codes can contain information such as URLs, text, or contact information.

Step 1 – Working on the UI

I will add an input field to accept the input string/data for generating the QR code. Two buttons to display the QR Code and to download the QR Code in .jpg format. And finally, a div that will display the QR Code.

Below is the sample Html code.


<html>
<head></head>
<body>
<input type="text" id="qrData" />

<br /><br />

<input type="button" value="Generate QR Code" onclick="GenerateQrCode()" />
<input type="button" value="Download QR Code" onclick="DownloadQrCode()" />

<br /><br />

<div id="qrcode"></div> <!--Display QR Code in this div-->
</body>
</html>

Step 2 – Download the QRCode.js library

To download the QRCode.js library follow the below link and download the .zip file.

https://davidshimjs.github.io/qrcodejs/

Once downloaded, extract the folder and find the qrcode.min.js file

Copy the qrcode.min.js file and paste it into your project folder.

Include the qrcode.min.js into our HTML file.

Step 3 – Write JS Code to Generate QR Code


 function GenerateQrCode() {
   var userData = document.getElementById("qrData").value; //Reading the textbox value

   var qrCode = new QRCode(document.getElementById("qrcode")); //Initializing the library

   qrCode.makeCode(userData); //Code to generate qr code
}

Step 4 – Write JS Code to download QR Code

Include the below library in the our html file.

<script src=”http://html2canvas.hertzen.com/dist/html2canvas.js”></script>

Add the below function to download the generated QR Code.

function DownloadQrCode() {
   var container = document.getElementById("qrcode");
   html2canvas(container, { allowTaint: true }).then(function (canvas) {

   var link = document.createElement("a");
   document.body.appendChild(link);
   link.download = "html_image.jpg";
   link.href = canvas.toDataURL();
   link.target = '_blank';
   link.click();
 });
}

Step 5 – Demo

I hope, this blog post has helped you in learning and understand how to generate QR code using Javascript.

Thank You.

Dont’ forget to checkout: Top 5 Tips for Beginner React Developer

Share on facebook
Share on twitter
Share on linkedin

Related articles