如何在Node.js中将JPG图像转换为WEBP格式？

Question

我正在尝试使用react.Js上传图像并使用multer中间件将该图像保存在node.Js中。这工作得很好，但现在我想使用 webp-converter 将该图像转换为 WEBP 格式，反之亦然。

但我收到此错误：

 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'

如何使用 multer 和 WEBP 在节点中解决这个问题？有没有 其他转换解决方案？

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

我发现了一个简单的方法来做到这一点。

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

希望有帮助。

Answer 2

我使用了一个非常棒的图像处理库，名为

sharp

，该库提供的功能之一是将图像转换为 webp 图像

import sharp from 'sharp';

const imageProcessing = sharp();

imageProcessing
.webp()
.pipe(someWritableStream);

Answer 3

建议使用fast-image-server。

在这种情况下，您不需要将文件转换为webp格式。 相反，只需访问 webp 文件而不是 jpg 文件。 该库将转换为 webp 格式。 它还缓存图像。