你是否曾经想过在前端开发中对图片进行处理，例如调整亮度、对比度、饱和度、模糊等操作，让图片更加生动、精美？这时候，一个方便易用的 npm 包 node-image-filter 就能派上用场了。
node-image-filter 简介
node-image-filter 是一个轻量、快速、易于使用的 Node.js 模块，用于图片处理、调整和过滤。此包支持诸如调整图像和添加过滤器之类的基本操作，可以与 Node.js 或 Web 环境一起使用。
node-image-filter 安装
要安装 node-image-filter，首先需要在终端中打开您的工作文件夹，并使用以下命令：
npm install node-image-filter
node-image-filter 使用
下面是一个简单的示例，请在代码中注释更多信息：
-- -------------------- ---- -------
-- -- ----------------- --
----- ------ - -----------------------------
-- ----
----- ------- - ---------------------
-- -------
----- ------------ - -
----------- ---- -- --
--------- ---- -- ---
----------- ---- -- ---
----- - -- --
--
-- ------
--------------------- -------------
-------------- -- -
-- ----------
----- ---------- - -------------------------
-- ------------
------------------- ------------
--
----------------------node-image-filter 教程
图像处理
要处理图像，您需要传递一个 imgPath 参数以及一个 filterParams 参数，该参数指定要应用的任何滤镜、调整的亮度、对比度、饱和度等的值。
为了使这个概念更清晰，请看以下示例：
// 过滤器参数对象
const filterParams = {
brightness: 0.5, // 亮度
contrast: 0.5, // 对比度
saturation: 0.5, // 饱和度
blur: 3 // 模糊
};如上，我们传入了四个属性用于调整图像：brightness（亮度）、contrast（对比度）、saturation（饱和度）和 blur（模糊）。
值得一提的是，这些属性的值均为介于 0 到 1 之间的小数。值越大，图像就越明亮、对比度越高、饱和度越高，就越重要。在下面的示例中，您将看到如何将图片的亮度减半：
// 过滤器参数对象
const filterParams = {
brightness: 0.5, // 将亮度减半
};图像保存
要保存一个处理过的图像，您需要传递一个参数，该参数指定图像处理结果的输出路径。下面是示例：
const newImgPath = '/my/new/image/path.jpg'; // 将处理后的图像保存到本地 filter.save(result, newImgPath);
图像压缩
有时候，在前端实现图片处理会因为图片大小过大而拖慢网页速度，而 node-image-filter 支持一个 quality 参数，将 图片压缩到指定质量，并将其作为可选项传递给 filter.apply() 方法。质量范围介于 0 和 1 之间。下面是一个示例：
-- -------------------- ---- -------
----- ------------ - -
----------- ----
--------- ----
----------- ----
----- --
-------- --- -- ----- ---
--
--------------------- -------------
-------------- -- -
----- ---------- - -------------------------
------------------- ------------
--
----------------------总结
node-image-filter 是一个非常有用的 npm 包，它让图片处理变得简单、高效，轻轻松松调整图片亮度、对比度、饱和度、模糊等属性，让你更方便地处理图像，增强网站用户体验。当您想要在您的前端项目中编辑和调整图像时，请务必考虑使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1381e8991b448dca6b