Home » Generate QR codes using JavaScript
Generate QR codes using JavaScript

Generate QR codes using JavaScript

Introduction:

In the digital age, quick response (QR) codes have become an integral part of our daily Lifes. From accessing websites to making payments, QR codes provide a simple and efficient way to provide information. In this tutorial, we will explore how to generate QR codes using JavaScript. Dynamic QR codes allow codes to be generated on the move, enabling a wide range of applications.

What is QR Code?

Denso Wave, a Japanese company, invented QR codes in 1994 to label automobile parts. QR codes use a square grid of black squares on a white background along with fiducial markers. An imaging device like a camera can read the QR code and process it with Reed-Solomon error correction to appropriately interpret the image.

QR codes allow storing large amounts of data, including website URLs, phone numbers, or up to 4,000 characters of text. This stored data enables a variety of uses for QR codes like advertising, electronic payments, joining Wi-Fi networks, and providing extra information about exhibits at museums. QR codes see widespread adoption because of their convenience and versatility, but security issues exist like code visibility and malicious QR codes.

Create HTML File

cdnjs is a popular open-source front-end, easy-to-use JavaScript library that simplifies QRCode. This library supports Cross-browser QR Code generation with HTML 5 canvas and table tag. QRCode.js has no other dependencies.

To begin, create a basic HTML file with the required settings. Include a section where the QR code will appear and add an input field for users to input the data they wish to encode. Here is a prime example:

<!DOCTYPE html>
<html>
<head>
  <title>QR Code Generator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script src="/script.js"></script>
</head>
<body>
  <h1>QR Code Generator</h1>
  <form>
    <label for="input">Enter text to encode:</label>
    <input type="text" id="input" name="input">
    <button type="button" onclick="generateQRCode()">Generate QR Code</button>
  </form>
  <div id="qrcode"></div>
</body>
</html>

Creating the JavaScript File (generateQR.js):

Now, let’s write the JavaScript code to generate dynamic QR codes. We’ll use a popular library called qrcode-generator for simplicity.

function generateQRCode() {
    // Retrieve the value entered by the user in the input field with the id "input"
    var input = document.getElementById("input").value;

// Create a new instance of the QRCode class and pass in the following configuration options
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: input,              // The data to be encoded in the QR code
        width: 256,               // The width of the QR code in pixels
        height: 256,              // The height of the QR code in pixels
        colorDark: "#000000",     // The color of the dark squares in the QR code (black)
        colorLight: "#ffffff",    // The color of the light squares in the QR code (white)
        correctLevel: QRCode.CorrectLevel.H  // The error correction level (H stands for High)
    });
}

Output:

Generate QR codes Example

The code above implies that you have a correct HTML structure with an empty field (identity: “qrcode”) where the QR code may appear and an input topic (identity: “input”) where users may enter facts. The function generateQRCode should be triggered, for example, when a button is clicked or when the user submits a form.

Direct Generate QR Code Without Link

A QR code does not have to contain a URL. It can contain any kind of string data:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body data-rsssl=1>

    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
            integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <p>Clicking the button will create a QR code containing the secret message "www.thehashcode.com".</p>
    <button id="btn">Generate QR code!</button>
    <div id="qrcode-container"></div>
    <script>
        document.getElementById('btn').addEventListener('click', createQRCode)
        function createQRCode() {
            const QRElement = document.getElementById("qrcode-container");
            QRElement.innerHTML = "";
            new QRCode(QRElement, "www.thehashcode.com");
        }
    </script>

</body>

</html>

Output:

Generate QR codes Example

Conclusion:

In this comprehensive guide, we explored the exciting world of QR codes and learned how to create them dynamically with JavaScript. QR codes empower digital interactions, integrating dynamic generation into web applications for limitless potential, making them a valuable digital asset. Whether you’re a manufacturer, marketer, or entrepreneur, harnessing the power of QR codes has opened up new possibilities for efficient information exchange in our connected world.

More Reading

Post navigation

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *