How to Create QR Codes in JavaScript

QR Code or Quick Response Code is a two-dimensional barcode invented in 1994 by Denso Wave for the automotive industry. The initial objective was to scan the components rapidly.

With the advent of smartphones, QR Codes have become very popular reason being it can contain a lot more data compared to the traditional barcodes apart from being quick.

Nowadays, QR Code have become very common — tickets, for payments using digital wallets, to open websites and more.

This tutorial explains how to create QR codes using the QRCode.js Javascript library.

Demo - QR Code Generator

QRCode.js

We will be using QRCode.js library to generate QR codes. It is a simple to use library.

QRCode.js can be delivered through JS Deliver CDN also.

Using QRCode.js

The library is initialized as shown.

var my_qr_code = new QRCode(element, options);

Two parameters need to be passed while creating a new object :

• element : The HTML DOM element into which the generated QR Code will be added.
• options : An object containing various options. The various options that can be passed are:
  • text : The text for the QR Code.
  • width : The width of the generated QR Code image.
  • height : The height of the generated QR Code image. The general rule fo the thumb is to keep the width and height equal.
  • colorDark : The color of the QR Code.
  • colorLight : The background color of the QR Code.
  • correctLevel : Error correction capability level. For more information read this.

// DOM element
var element = document.querySelector("#div-qrcode");

// options
var options = {
    text: "UsefulAngle",
    width: 64,
    height: 64,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
}

// generates QR Code in the DOM element
var my_qr_code = new QRCode(element, options);

There are also methods to re-create the QR code, or to clear it. For full information visit QRCode.js Github page.