Giter VIP home page Giter VIP logo

webp-batch-convert's Introduction

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.

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

webp-batch-convert's People

Contributors

dependabot[bot] avatar renxia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

webp-batch-convert's Issues

Mac 全局安装后提示 MODULE_NOT_FOUND

Mac 通过 npm 全局安装后无法运行,找不到 ../cjs/cli 入口。

node:internal/modules/cjs/loader:959
  throw err;
  ^

Error: Cannot find module '../cjs/cli'
Require stack:
- /Users/Cyrus/.nvm/versions/node/v18.6.0/lib/node_modules/webp-batch-convert/bin/wbc.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/Cyrus/.nvm/versions/node/v18.6.0/lib/node_modules/webp-batch-convert/bin/wbc.js:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/Cyrus/.nvm/versions/node/v18.6.0/lib/node_modules/webp-batch-convert/bin/wbc.js'
  ]
}

这个repo是停止维护了吗?fs依赖的问题

Uncaught Error: Cannot find module "fs" at webpackMissingModule (cwebp.js:3) at eval (cwebp.js:3) at Object.<anonymous> (app.js:formatted:1532) at d (app.js:formatted:708) at r (app.js:formatted:410) at eval (index.js:1) at Object.<anonymous> (app.js:formatted:1529) at d (app.js:formatted:708) at r (app.js:formatted:410) at eval (container.jsx:13)
引起后续一系列问题

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.