简单图床脚本：将上传图片转为webp

WebP是一种现代图像格式，它能够提供更好的图像压缩比和更快的加载速度。在本文中，我们将介绍如何使用Node.js和Sharp库将图片转换为WebP格式，以及如何使用TypeScript编写这个脚本程序。

安装Sharp库

首先，我们需要在Node.js中安装Sharp库。可以通过npm安装：

npm install sharp

编写转换脚本

以下是一个脚本的简单示例

import sharp from 'sharp';
import path from 'path';
import fs from 'fs';
​
// MIME 类型数组  
const allowedTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];
​
const convertToWebp = async (file: Express.Multer.File, commonPath: string) => {
  const isImage = allowedTypes.includes(file.mimetype);
  const isGif = file.mimetype === 'image/gif';
  const filepath = path.resolve(__dirname, '../', commonPath, file.filename);
  file.filename = isImage && !isGif ? file.filename.replace(/.[^.]+$/, '.webp') : file.filename;
  const output = path.resolve(__dirname, '../', commonPath, `${file.filename}`);
  if (file.mimetype !== 'image/webp' && !isGif && isImage) {
    try {
      await sharp(filepath)
        .toFormat('webp')
        .webp({quality: 80, effort: 6})
        .toFile(output);
      fs.unlinkSync(filepath);
    } catch (e) {
      console.error(e);
    }
  }
};

在这个脚本程序中，我们使用Sharp库将图片转换为WebP格式。首先，我们检查文件的MIME类型是否为允许的图像类型之一。然后，我们检查文件是否为GIF格式，如果是，则不进行转换。接下来，我们使用Sharp库将文件转换为WebP格式，并将其保存在与原始文件相同的位置。最后，我们删除原始文件。

同时，我们也使用了具体Sharp参数对图片做了处理：

• quality: 80 指定了 WebP 编码的质量，这个值可以在 0 到 100 之间设置，数值越高，图像质量越好，但文件大小也会随之增大。在这里，quality 被设置为 80，意味着编码后的图像质量比默认值更高。
• effort: 6 指定了 WebP 编码器的压缩程度。这个值可以在 0 到 6 之间设置，数值越高，压缩效果越好，但也会增加编码时间。在这里，effort 被设置为 6，意味着压缩效果比默认值更好，但也可能会增加编码时间。

这些选项可以根据具体的需求进行调整，以获得最佳的编码效果。

使用转换脚本

我们可以将这个脚本程序用于上传图片的处理。假设我们有一个Express应用程序，用于处理文件上传，并将文件保存在"uploads"目录下。以上面提到的代码为例，将其植入我们的程序当中，将图片转换为WebP格式。

// MIME 类型数组
const allowedTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];

// 公共路径  
let commonPath = 'uploads/';

app.post('/upload', async (req: Request, res: Response, next: NextFunction) => {
    upload.single('file')(req, res, async (err) => {
        if (err) {
            next(new ParameterException(err.message));
            return;
        }
        const file = req.file;
        if (!file) {
            next(new ParameterException('文件不能为空'));
            return;
        }
        const isImage = allowedTypes.includes(file.mimetype);
        const isGif = file.mimetype === 'image/gif'
        const filepath = path.resolve(__dirname, '../', commonPath, file.filename);
        // 去除原文件后缀
        file.filename = isImage && !isGif ? file.filename.replace(/.[^.]+$/, '.webp') : file.filename;
        const output = path.resolve(__dirname, '../', commonPath, `${file.filename}`);
        // 非webp格式的图片才进行转换
        if (file.mimetype !== 'image/webp' && !isGif && isImage) {
            try {
                // 转换为webp格式
                await sharp(filepath)
                    .toFormat('webp')
                    .webp({quality: 80, effort: 6})
                    .toFile(output);
                // 删除原文件
                fs.unlinkSync(filepath)
            } catch (e) {
                console.error(e);
                next(new ServerError('图片转换失败'));
            }
        }
        // 返回文件信息
        commonPath = commonPath.replace(/\\/g, '/');
        next(new Success({
            filename: file.filename,
            originalName: file.originalname,
            mimetype: file.mimetype,
            size: file.size,
            path: `${process.env.BASEURL || 'http://localhost:3000'}/${commonPath}/${file.filename}`,
        }));
        commonPath = 'uploads/';
    });
});
​

我们使用了使用multer中间件的"upload.single"方法，处理名为"file"的单个文件上传请求。最后部分，返回一个成功的响应，其中包括转换后文件的文件名、原始文件名、文件类型、文件大小和文件路径等信息。

总结

在本文中，我们介绍了如何使用Node.js和Sharp库将图片转换为WebP格式。我们还展示了如何使用TypeScript编写脚本程序，并在Express应用程序中使用它来处理文件上传。WebP格式是一种现代的图像格式，它能够提供更好的图像压缩比和更快的加载速度。通过将图片转换为WebP格式，我们可以提高网站的性能和用户体验。