Featured, Miscellaneous

Generate and Download QR Code using Javascript

October 30, 2022

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.

.NET Core Microservices - The Complete Guide (.NET 8 MVC)


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

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();
 });
}