September 29, 2021

How to Generate QR code in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to generate QR code in javascript. QR code stands for Quick Response Code. It was invented in 1994 by Denso Wave, a Japanese automotive company.

It consists of black and white pixel patterns and is a two-dimensional version of the barcode. In the modern world, QR code is widely popular in comparison to the barcode.

There are a lot of advantages of using QR code over the barcode and one of them is data storage capability. A barcode can store up to 25 characters whereas a QR code can store up to 2500 characters.

I will not go further into the details of the QR code since that is completely out of the scope of this tutorial. Generating a QR code from scratch is not that easy and that is why we are going to use the QRCode.js library. This library is super simple and easy to use. Please do visit the official website to learn more about it.

In the following example, we are going to enter some random text in the input field. Upon click of a button, we will generate a QR code for that text and display it on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and input). The div element with a class of container is just a wrapper for the rest of the elements.
The innerText for the button element is “Generate”.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have downloaded the QRCode.js library from the official website and included it in the HTML file using the script tag.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <input type="text" placeholder="Enter Text">
        <button>Generate</button>
        <div id="qrcode"></div>
    </div>
    <script src="qrcode.js"></script>
    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto;
    height: 320px;
    width: 250px;
}

#qrcode {
    border: 1px solid black;
    height: 250px;
}

Javascript

We have selected the input element and button element using the document.querySelector() method and stored them in the input and button variables respectively.
We are using the QRCode() constructor to create a QRCode object. This constructor takes 2 parameters. The first parameter could be an element or id of the element where you would like to display the QR code. The second parameter could be a text or an object with a bunch of options where you can specify the size, color, correction level, etc. of the QR code.

We are storing our QRCode object in the qrcode variable.
We have attached the click event listener to the button element.
The QRCode object contains the makeCode() method and this method takes a string as a parameter. We are simply passing the value of the input element to this method. As soon as it is done with processing, the QR code for that string will be displayed on the screen.

let input = document.querySelector('input');
let button = document.querySelector('button');
let qrcode = new QRCode(document.querySelector('#qrcode'), {    
    width: 250,
    height: 250,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

button.addEventListener('click', () => {
    let inputValue = input.value;
    qrcode.makeCode(inputValue);
})

You May Also Like: