Back to Blog 3 min read

Generating QR Codes with JavaScript

QR (Quick Response) codes have become an integral part of modern technology, used for various purposes like sharing URLs, contact information, and mo...

QR (Quick Response) codes have become an integral part of modern technology, used for various purposes like sharing URLs, contact information, and more. In this blog, we'll explore how to generate QR codes using a JavaScript library. We'll focus on a popular library called qrcode.js for simplicity.

Getting Started

Before you begin, make sure you have a basic HTML file where you will show your QR code and include the qrcode.js library. You can either download it from the official GitHub repository or include it directly from a content delivery network (CDN). For this guide, we'll use the CDN method:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate QR Code</title>
    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode"></div>
</body>
</html>

Generating a Simple QR Code

It's very simple to generate qr code using qrcode.js because it provides very simple syntax. You can use the syntax you can see below and you can generate qr code easily.

<script>
    // Create a QRCode object with the URL you want to encode
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "https://example.com",
        width: 128,
        height: 128
    });
</script>

In this code snippet, we:

  • Create a new QRCode object.
  • Specify the target HTML element with getElementById("qrcode").
  • Provide the URL you want to encode in the text property.
  • Set the dimensions of the QR code with width and height (in this example, 128x128 pixels).

Customizing QR Codes

You can customize QR codes further by changing their color, adding a label, and adjusting error correction levels. Here's an example of how to customize a QR code:

<script>
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "https://example.com",
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H // High error correction
    });
</script>

In this code:

  • colorDark sets the color of the QR code's dark modules.
  • colorLight sets the color of the light modules.
  • correctLevel sets the error correction level (H stands for High).

Related: Generate Temporary Expiring links in laravel

Conclusion

Generating QR codes using JavaScript with the qrcode.js library is straightforward and provides you with a flexible way to integrate QR codes into your web applications. Whether it's for sharing links, contact information, or any other data, creating QR codes is a valuable skill for modern web developers.