Skip to content

webp 图片批量转换。将 png/jpg/bmp 格式的图片批量转换为 webp 格式。

Notifications You must be signed in to change notification settings

lzwme/webp-batch-convert

Repository files navigation

webp-batch-convert

Webp Batch Convert

webp 图片批量转换。将指定目录内 png/jpg/jpeg/bmp/gif 格式的图片批量转换为 webp 格式。

NPM version node version npm download GitHub issues GitHub forks GitHub stars minzipped size

快速上手

在项目目录中安装

npm install --save-dev webp-batch-convert
npm exec wbc -h

使用示例(nodejs 模块 API 方式)

//import convert from 'webp-batch-convert';
const convert = require('webp-batch-convert');
let res;

// 示例一: 生成 img 目录下的图片文件至 webp 目录
res = await convert.cwebp('./img', './webp');
console.log('total: ', res);

// 示例二: 生成 img 目录下的图片文件至 webp 目录,附带质量等参数
// 更多参数参考:https://developers.google.com/speed/webp/docs/cwebp?csw=1#options
// 也可以执行如下命令通过 cwebp 帮助信息了解: `yarn cwebp --longhelp`
const cwebpOpts = {
    /** don't print anything */
    quiet: true,
    /** quality factor (0:small..100:big), default=75 */
    q: 75,
    /** transparency-compression quality (0..100), default=100 */
    alpha_q: 100,
    /** spatial noise shaping (0:off, 100:max), default=50 */
    sns: 50,
    /** filter strength (0=off..100), default=60 */
    f: 60,
    /** use simple filter instead of strong */
    nostrong: false,
};
// 先清空输出目录
convert.utils.delDir('./webp');
res = await convert.cwebp('./img','./webp', cwebpOpts);
console.log('total: ', res);

best-practice

命令行方式使用(wbc / cwebp-batch)

全局安装

npm install -g webp-batch-convert
wbc -h
# or 
cwebp-batch -h

也可以不安装,使用 npx 执行:

npx webp-batch-convert -h

使用示例

wbc --in img-folder --out webp-folder <--debug --q 75>

或者局部安装,然后如下方式使用:

./node_modules/.bin/wbc --in img-folder --out webp-folder <-D -q 75>

API

  • .cwebp(imgDir, webpDir, cwebpOptions)

批量转换生成 webp。示例:

// 将 img 目录下的所有图片转换为 webp 文件,输出至 webp 目录
const res = await convert.cwebp('./img','./webp', {
    debug: true,
    q: 60        // 质量
});
console.log('result: ' + res);
  • .utils.mkDir(dirPath)

创建一个(深度的)目录。示例:

// 创建目录
convert.utils.mkDir('./src/assets/webp');
  • .utils.delDir(dirPath, ext)

清空一个(非空的)目录。示例:

// 删除 webp 目录
convert.utils.delDir('./webp');
// 删除 webp 目录下的所有 webp 后缀的文件
convert.utils.delDir('./webp', 'webp');
// 删除 webp 目录下的所有 .webp、png 后缀的文件
convert.utils.delDir('./webp', /\.(webp|png)$/);

二次开发

  • 依赖安装 pnpm install
  • 修改/新增功能
  • 添加测试并执行 pnpm test
  • 全局安装与测试 npm link . && wbc -h

License

webp-batch-convert is released under the MIT license.

该插件由志文工作室开发和维护。