Oh Snap!

Please turnoff your ad blocking mode for viewing your site content

Hit enter after type your search item

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

/
/
/
137 Views

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.

READ  Deno & MongoDB REST API Tutorial with Oak Framework

 

 

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")
})

 

READ  Node.js Express Youtube Video Info Application Using Youtube Data API Full Project

 

<!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 Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :