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