How to convert JPG image to WEBP format in Node.js?

Question

I m trying to upload an image using react.Js and save that image in node.Js using multer middleware. This is working perfectly but now I want to convert that image to WEBP format using webp-converter which is a small vice- versa.

But I m getting this error :

 Error: Command failed: E:\Zegal\node_modules\webp-converte
 ib/libwebp_win64/bin/cwebp.exe -q 80 2a3279b820cc23939eea0295228423ee-- 
 inspironal-quote-about-life-inspiring-words.jpg -o output.webp
 SHCreateStreamOnFileA(filename, STGM_READ, stream) failed 80070002
 Error opening input file 2a3279b820cc23939eea0295228423ee--inspirational-quo
 about-life-inspiring-words.jpg (80070002)
 OpenInputStream(filename, &stream) failed 80070002
 cannot open input file '2a3279b820cc23939eea0295228423ee--inspirational-quot
 bout-life-inspiring-words.jpg'
 Error! Could not process file 2a3279b820cc23939eea0295228423ee--inspirationa
 uote-about-life-inspiring-words.jpg
 Error! Cannot read input picture file '2a3279b820cc23939eea0295228423ee--ins
 ational-quote-about-life-inspiring-words.jpg'

How can I solve this problem in node using multer and WEBP ? Is there any other solution for conversion ?

const multer = require('multer');
const webp = require('webp-converter');
const path = require('path');
const storage = multer.diskStorage({
    destination: './public/images',
    filename(req, file, cb) {
        cb(null, `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`)
    }
});

const upload = multer({
    storage,
    fileFilter: function (req, file, cb) {
        checkFileType(file, cb)
    }
}).single("image");

checkFileType = (file, cb) => {
    console.log("check file", file);
    const requireMimetype = "image/jpeg";
    const checkMimeType = file.mimetype == requireMimetype ? true : false;
    console.log("checkMimeType", checkMimeType);
    if (checkMimeType) {
        webp.cwebp(file.originalname, "output.webp", "-q 80", function (status) {
            console.log(status);
        });
        return cb(null, true)
    } else {
        cb("Error:Only jpg images are allowed.")
    }
}

module.exports = upload;

Answer 1

I find sharp a ease way to do so.

const sharp = require('sharp');


console.log(req.files.image, "form image is here"); 
console.log(req.files.image.data, "form image buffer data is here");

sharp(req.files.image.data)            
.rotate()            
.resize(200)            
.toBuffer()            
.then( newBuffer => { 

//changing the old jpg image buffer to new webp buffer
 req.files.image.data = newBuffer;

//moving the new webq image to server public folders
 req.files.image.mv(appRoot+'/uploads/images/'+ Date.now() + '.webp', function(err) {                
  if (err) {                    
     return res.status(500).send(err);                
  }
   res.status(200).json({
      message : "image uploaded successfully" 
  })
 })            
})            
.catch( err => { console.log(err) });

Hope it helps.

Answer 2

I had used a really awesome image processing library named sharp, and one of the features that that library offer is to convert an image into a webp image

import sharp from 'sharp';

const imageProcessing = sharp();

imageProcessing
.webp()
.pipe(someWritableStream);