Node.js Express Webp Image Converter to PNG and JPG Files Using Javascript Full Project

Node.js Express Webp Image Converter to PNG and JPG Files Using Javascript Full Project

Welcome folks today in this tutorial we will see that how to convert the webp files inside the browser to png and jpg files using node and express using a node library called as the webp-converter library. All the source code is givenn below check it and also a step by step youtube video is also shown below to better follow with the blog.

 

 

Screenshots

 

 

 

const express = require('express')

const multer = require('multer')

const webp=require('webp-converter');

const app = express()

app.set("view engine","ejs")

app.get('/',(req,res) => {
    res.render("index")
})

var storage = multer.diskStorage({
    destination: function (req, file, callback) {
      callback(null, "uploads/");
    },
    filename: function (req, file, callback) {
      callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    },
  });
   
  var upload = multer({ storage: storage }).single('image')



app.post('/',(req,res) => {
   upload(req,res,err => {
       if(err) throw err

       console.log(req.file.path)

       var output_path = Date.now() + "result.png"


       const result = webp.dwebp(req.file.path,output_path,"-o");
result.then((response) => {
  res.download(output_path)
});
   })
})

app.listen(4000,() => {
    console.log("App is listening on Port 4000")
})

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <div class="container">
          <br>
      <h1 class="text-center">Webp Image Converter</h1>
      <br>
      <form action="/" id="myForm" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <input type="file" name="image" class="form-control" id="">
        </div>
        <div class="form-group">
            <button class="btn btn-danger btn-block">
                Convert Image
            </button>
        </div>
    </form>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>

Leave a Reply