Home / FAQs / Generate QR codes using JavaScript

Generate QR codes using JavaScript

FAQs

July 20, 2022 0

Last updated: September 26, 2022.

A QR code contains within it string data (often a URL) that can be decoded by a capable device, such as a smartphone.

You can create your own QR codes in JavaScript using the QRCode.js library.

Once you have imported the library, all you need to do is call upon a method within it while specifying the string data that the QR code should contain. QRCode.js will then take care of all the heavy lifting of actually creating a QR code.

Optionally, you can customize the dimensions and color combination of the QR code.

Importing QRCode.js

To get started quickly with QRCode.js, insert a <script> tag containing a valid CDN link in the <head> section of your HTML document.

For example, at the time of writing, you can use the following CDN link provided by cdnjs:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Alternatively, you can install QRCode.js locally and then import it.

To install QRCode.js from the command line:

npm install --save qrcode

Then, if running JavaScript in the browser, use import...from:

import QRCode from 'qrcode';

If working in Node.js, you use require:

const QRCode = require('qrcode');

Further installation instructions can be found on the official NPM page of the package.

Generating QR codes

After importing QRCode.js, you have access to the QRCode constructor object.

You can create a new QR code with this object by calling it with the new operator preceding it. This indicates that it should create a ‘new’ object of its type.

Inside the parantheses used to call the constructor object, two arguments need to be passed in.

The first argument is the target element in the DOM into which the QR code will be appended.

The second is the string data that the QR code will contain. This string can then be read by somebody inspecting the QR code with a capable device.

Usually, a QR code will contain a link. So let’s start with an example where the string data is a link.

Example #1: QR code containing a link

Below we create a new QR code that contains a link to this page.

If you have a capable smartphone camera, hover this over the newly created QR code to access the link!

<div id="qrcode-container"></div>

<script type="text/javascript">

new QRCode(document.getElementById("qrcode-container"), 'https://openjavascript.info/2022/07/20/generate-qr-codes-using-javascript/');

</script>

With a few small modifications to the code above, you can create a QR code generator app that creates new codes containing user input:

<label for="user-input">Enter QR code data: </label>
<input type="text" id="user-input">
<button id="btn">Generate QR code!</button>
<div id="qrcode-container"></div>

<script type="text/javascript">

document.getElementById('btn').addEventListener('click', createQRCode);

function createQRCode() {

  const text = document.getElementById('user-input').value;
  new QRCode(document.getElementById("qrcode-container"), text);

}

</script>

Example #2: Without a link

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

<div id="qrcode-container"></div>

<script type="text/javascript">

const QRElement = document.getElementById("qrcode-container");
new QRCode(QRElement, "The Eagle Has Landed");

</script>

You can even store the data contained in a JavaScript object literal or array inside a QR code in JSON string format.

To do so, pass the data object or array through the JSON.stringify() method:

<div id="qrcode-container"></div>

<script type="text/javascript">

const QRElement = document.getElementById("qrcode-container");

let reservationNumber = {
  id: "abc-1234",
  flight: "5883",
}
  
new QRCode(QRElement, JSON.stringify(data));

</script>

Customizing QR code appearance

If you want to customize the appearance of the QR code, insert an object as the second argument when generating a new QR code.

Inside the object, you can create properties to customize the width, height and coloring of the QR code:

<div id="qrcode-container"></div>

<script type="text/javascript">

const QRElement = document.getElementById("qrcode-container");

new QRCode(QRElement, {
	text: "https://openjavascript.info",
	width: 150,
	height: 150,
	colorDark : "purple",
	colorLight : "yellow",
});

</script>