Fri Jun 02 2023

How to create and read QR codes in NodeJs

In this tutorial, we will show how to create QR codes, and how to read the value of an image of a QR code.

Free QR Code API

If you want to use an API for this instead, we are offering one for free where you can easily create and decode QR codes. Check it out here.

Dependencies

We will use three libraries for achieving this.

qrcode
qrcode-reader
jimp

npm i qrcode qrcode-reader jimp

Create QR codes

We will start by creating some QR codes. We will start by creating a SVG and then a PNG.

SVG

Below snippet, will show how to create the QR code as a SVG

const QRCode = require("qrcode");

(async () => {
  const svg = await QRCode.toString("QR code as a SVG", {
    type: "svg",
  });
  console.log(svg);
})();

Result

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h33v33H0z"/><path stroke="#000000" d="M4 4.5h7m1 0h1m1 0h6m2 0h7M4 5.5h1m5 0h1m1 0h2m1 0h1m1 0h3m2 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m1 0h1m1 0h2m1 0h2m3 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m3 0h3m1 0h3m1 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h2m1 0h3m1 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m3 0h2m1 0h2m3 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M13 11.5h1m1 0h2m1 0h3M4 12.5h1m2 0h8m2 0h5m2 0h1m1 0h3M7 13.5h3m1 0h4m3 0h1m2 0h1m1 0h2m1 0h1M5 14.5h2m2 0h2m3 0h1m1 0h1m1 0h2m1 0h5m1 0h2M5 15.5h2m1 0h2m1 0h1m6 0h2m5 0h3M4 16.5h1m5 0h2m1 0h3m1 0h3m1 0h3m1 0h1m1 0h2M4 17.5h1m2 0h3m2 0h3m1 0h1m3 0h1m3 0h1m2 0h2M4 18.5h2m1 0h6m5 0h2m2 0h2m3 0h2M4 19.5h1m3 0h1m2 0h1m1 0h1m2 0h5m1 0h1m1 0h5M4 20.5h1m1 0h2m2 0h1m1 0h5m2 0h10M12 21.5h2m1 0h1m3 0h2m3 0h2m2 0h1M4 22.5h7m1 0h1m3 0h5m1 0h1m1 0h1m3 0h1M4 23.5h1m5 0h1m1 0h4m1 0h1m1 0h2m3 0h2m2 0h1M4 24.5h1m1 0h3m1 0h1m1 0h4m1 0h1m1 0h7m2 0h1M4 25.5h1m1 0h3m1 0h1m1 0h1m3 0h2m2 0h3m2 0h4M4 26.5h1m1 0h3m1 0h1m2 0h3m1 0h1m1 0h1m1 0h1m2 0h2m1 0h2M4 27.5h1m5 0h1m4 0h3m3 0h3m1 0h4M4 28.5h7m1 0h6m1 0h2m1 0h1m1 0h2m2 0h1"/></svg>

PNG

Now, we will create a PNG file of the QR code

const QRCode = require("qrcode");

(async () => {
  await QRCode.toFile("QR.png", "QR code as a PNG");
})();

And in the root of your project, there will be an image of the QR code.

Decode

Now we will read the QR code that we created in the previous section, and decode it.

const Jimp = require("jimp");
const QrCodeReader = require("qrcode-reader");

(async () => {
  const image = await Jimp.read("QR.png");

  const qrCodeInstance = new QrCodeReader();

  qrCodeInstance.callback = (err, value) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(value.result);
  };

  qrCodeInstance.decode(image.bitmap);
})();