Generating QR code in Node.JS , Express.JS

BACKGROUND

A quick response( QR) law is a type of bar-code that can be read fluently by a digital device and which stores information as a series of pixels in a square-structured grid. QR canons are constantly used to track information about products in a force chain and frequently used in marketing and advertising

juggernauts.

INTRODUCTION

A QR law works also to bar-codes at the supermarket. Each QR law consists black places and blotches which represent different pieces of information. When scrutinized, the unique pattern on the bar-code translates into mortal- readable data.

PREREQUISITE

- NODE JS and NPM should have already installed in your computer.

- Basic knowledge of

NODE, EXPRESS
ejs template engine.
nodemon

and install express, qrcode and ejs package on your project by following commands:


npm install express
npm install qrcode
npm install ejs

CREATEING PROJECT

Create a NOJE.JS project by entering the command "npm init -y" , Here -y is optional

After hitting the command you get package.json and following response in terminal

CODE EXAMPLES

Project Structure and Files:

Add "type": "module" in package.json file and Add "start": "nodemon ." inside 'scripts' components in package.json file

Importing and creating server with necessary dependencies


import QRCode from "qrcode";
import express from "express";
const app = express();
//initializing exoress

app.use(express.json());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.set("view engine", "ejs");
//setting viewing engine

app.use(express.static("public"));
//defining the 'public' as static folder

//creating server on port 5000 or you can replace port.
app.listen(5000, async (req, res) => {
  console.log("Server has started");
});

Making ejs file inside 'views' folder and adding html code

index.ejs

  
<!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>QR:Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="input-group mt-4 d-flex justify-content-center">
    <form action="/" method="post" class="mt-4">
        <input type="text" class="form-control" required placeholder="Enter URL or Text" name="data">
        <button class="btn btn-outline-secondary mt-3" type="submit">Generate</button>
    </form>
</div>
</body>
</html>

qr.ejs

  
<!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>QR:Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="input-group mt-4 d-flex justify-content-center">
<img src="/qr.jpeg" style="background-color:#fff;" height="200px" width="200px">
</div>
</body>
</html>

Creating simple Routes for GET and POST methods

  
  app.post("/",async(req,res)=>{
  //qr code generating code here
})

app.get("/", async (req, res) => {
  res.render("index");
  //simple rendering index.ejs
});

app.get('/generated',async(req,res)=>{
  res.render("qr")
  //rendering the Generated qr code
})

Code for Generating QR code in image format


app.post("/",async(req,res)=>{
  var text=req.body.data
  console.log(text);
  try {
    if(text){

      QRCode.toFile(
        "public/qr.jpeg",
        //loaction where to store image with name
        text,
        //this 'text' is the text which is converted in QR code
        {
          color: {
            dark: "#000",
            light: "#fff",
          },
          //adding colour to QR image
        },
        function (err) {
          if (err) throw err;
        }
        //Throws error is error occurs

      );
      res.redirect("/generated")
      //redirect the page after successfully generateing QR image
  }    
  } catch (error) {
    res.send("error");
  }
  //throws error if error occur inside try catch block 
})