概述
@anilanar/sharp 是一个非常好用的图片处理 npm 包，尤其是在前端开发中。
它可以在 Node.js 中进行简单、快速的图像处理，用来改变其大小、旋转、剪切、输出格式等。
在这篇文章中，我们将详细介绍 @anilanar/sharp 的使用方法，并附带示例代码。
安装
在使用 @anilanar/sharp 之前，你需要安装 Node.js，并在项目中安装它。
你可以使用 NPM 进行安装：
npm install @anilanar/sharp --save
基本使用
使用 @anilanar/sharp 对图片进行操作非常简单。
以下是一个将 my-image.jpg 图片文件调整为 400x400 像素并输出为 webp 格式的示例代码：
-- -------------------- ---- -------
----- ----- - ---------------------------
---------------------
------------ ----
-----------------
-----------
---------- -- -
-- -----------
-- ---
--
---------- -- -
-------------------
---以上代码中，我们首先加载 @anilanar/sharp 并将图片文件 my-image.jpg 传入。
接着，我们使用 resize 方法进行大小调整，并使用 toFormat 方法输出为 webp 格式。
最后使用 toBuffer 方法获取处理后的图片数据，并保存或传递到需要的目的地。
进阶使用
除了基础的图片处理功能，@anilanar/sharp 还提供了一些高级用法，例如使用模板、添加水印、背景透明化等。
使用模板
可以使用模板来自定义图片的处理方式。你可以为新图片添加背景，改变颜色，添加文本等。
以下是一个使用模板的示例代码：
-- -------------------- ---- -------
----- ----- - ---------------------------
----- -- - --------------
----- ---- - ----------------------------
----------------
------------------- ----- ----- -- ---- ----
-------
-----------
---------- -- -
-- -----------
-- ---
--
---------- -- -
-------------------
---在以上示例中，我们首先从文件系统中加载 mask.png，然后使用 composite 方法将其与 src.jpg 合并。
最后，我们使用 jpeg 和 toBuffer 方法对新图像进行格式转换，并将其保存到文件或存入数据库中。
添加水印
你可以使用 @anilanar/sharp 在图片上添加水印。
以下是一个添加水印的示例代码：
-- -------------------- ---- -------
----- ----- - ---------------------------
---------------------
------------ ----
-----------
----------------------------- --------- -------------------------
-----------
---------- -- -
-- -----------
-- ---
--
---------- -- -
-------------------
---在以上示例中，我们使用了 overlayWith 方法将水印添加到旋转和大小调整后的图片 my-image.jpg 上。
我们可以使用 gravity 属性指定水印的位置，例如在右下角。
背景透明化
有时我们将需要使图片背景透明。
以下是一个将 jpeg 图像背景透明化的示例代码：
-- -------------------- ---- -------
----- ----- - ---------------------------
------------------
------------ ---- ------------ --- ---- -- -- -- -- ------ ----
--------------------- --- ---- -- -- -- -- ------ ----
-----------
---------- -- -
-- -----------
-- ---
--
---------- -- -
-------------------
---在以上示例中，我们使用 resize 方法来调整图片大小，同时为其添加背景颜色。
然后我们使用 flatten 方法将背景透明化，并使用 toBuffer 方法将处理后的图像数据存到数据库或文件中。
总结
@anilanar/sharp 是一个极其实用的前端工具，它提供了一系列强大的图片处理功能，使得前端工程师在处理图片方面更加轻松。
在实际项目中使用它时，可以根据需求选择对应的 API，轻松应对各种图片处理场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb081e8991b448dc4af