简介
Buaya 是一个 Node.js 环境下的图片处理工具，它支持图片类型转换、大小压缩等常用的图片操作功能。它是一个基于现代浏览器中的 Canvas 元素实现的图片处理工具，可以运行在 CLI 以及 Webpack 等工具中。
安装
在安装 buaya 之前，请确保您已经安装了 Node.js 环境。可以在终端中输入以下命令来检查，如果出现版本号，则说明已经成功安装了 Node.js：
node -v
在终端中输入以下命令来安装 buaya：
npm install buaya --save-dev
如果您需要全局安装 buaya：
npm install buaya -g
使用
命令行
buaya 基本用法
在命令行中输入以下命令可以使用 buaya 进行图片处理：
buaya [options] <file>
其中，[options] 表示选项参数，<file> 表示需要处理的图片文件路径。
选项参数
buaya 支持以下的选项参数：
| 选项 | 描述 |
|---|---|
| -q,--quality <num> | 设置输出图片的质量，取值范围为 1~100，默认值为 75。 |
| -w,--width <num> | 设置输出图片的宽度，在保持原有图片宽高比的情况下等比缩放。 |
| -h,--height <num> | 设置输出图片的高度，在保持原有图片宽高比的情况下等比缩放。 |
| -o,--output <file> | 设置输出图片的文件路径，默认为当前路径下以 _buaya 为后缀的文件。 |
例如，在终端中输入以下命令可以将图片 example.jpg 处理成宽度为 200 像素、质量为 80 的新图片，并保存到当前目录下的 thumbs 文件夹中：
buaya -w 200 -q 80 -o thumbs/example_thumbs.jpg example.jpg
buaya 进阶用法
buaya 还支持红眼修复、水印添加等高级操作。输入以下命令可以查看所有选项：
buaya --help
红眼修复
在终端中输入以下命令可以对图片中的红眼进行修复：
buaya red <file>
其中，<file> 表示需要进行红眼修复的图片文件路径。
水印添加
在终端中输入以下命令可以对图片进行添加水印：
buaya stamp [options] <file>
其中，[options] 表示选项参数，<file> 表示需要添加水印的图片文件路径。
buaya 支持以下的选项参数：
| 选项 | 描述 |
|---|---|
| -x,--x <num> | 设置水印的 x 坐标，默认为图片中心。 |
| -y,--y <num> | 设置水印的 y 坐标，默认为图片中心。 |
| --text <string> | 设置水印的文本。 |
| --font <string> | 设置水印的字体文件路径。 |
| --color <color> | 设置水印的文字颜色。 |
| --size <number> | 设置水印的字体大小。 |
| --angle <number> | 设置水印的角度。 |
例如，在终端中输入以下命令可以对图片 example.jpg 添加一个位于中心的水印：
buaya stamp --text 'watermark' --color '#fff' --font ./arial.ttf example.jpg
Webpack
buaya 也可通过 Webpack 的 file-loader 插件来实现。在 Webpack 的配置文件中，需要先安装 buaya-loader：
npm install buaya-loader --save-dev
在 Webpack 的配置文件中，添加以下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------------------
---- -
-
------- --------------
-------- -
----------- ---------
-
--
-
------- ---------------
-------- -
-------- ---
------ ---
-
-
-
-
-
-
--在以上配置中，buaya-loader 的选项参数与命令行使用时的选项参数相同。此外还需要注意，file-loader 也需要进行配置，指定图片输出的路径。
示例代码
以下是一个 Webpack 配置文件的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- --------------------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------------------------
---- -
-
------- --------------
-------- -
----------- ---------
-
--
-
------- ---------------
-------- -
-------- ---
------ ---
-
-
-
-
-
-
--结论
buaya 是一个十分简单易用的图片处理工具，它支持在命令行中以及 Webpack 中进行使用。通过对其进一步学习，您可以将其应用到您的项目中，提升您的项目体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde5432