@emanueleperuffo/metalsmith-sharp 是一个 Metalsmith 插件，可用于自动调整图像尺寸、旋转和调色，并能生成多种格式，如 JPEG、PNG 和 WebP 等，以适应不同的屏幕和设备。本文将为您介绍这个插件的使用方法和示例代码。
安装
使用 npm 安装：
npm install --save-dev @emanueleperuffo/metalsmith-sharp
使用方法
在 Metalsmith 的配置对象中添加以下代码：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----- - ---------------------------------------------
---------------------
--------------
----------------------
------------
------- ---------------------------------
------------- -
------- -
------ ----
------- ----
---- --------
--
----- -
-------- --
--
---- -
-------- --
-
-
---
------------ -- -
-- ----- -
-----------------
----- ----
-
------------------ ------------
---上述配置中，sharpOptions 对象指定了调整图像大小、质量、格式等的选项。这些选项都是可选的，可以根据实际需要自行配置。
示例代码
以下是一个完整的示例，可以将所有符合条件的图片缩小到 800 x 600 的尺寸，并压缩到 JPEG 格式：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----- - ---------------------------------------------
---------------------
--------------
----------------------
------------
------- ---------------------------------
------------- -
------- -
------ ----
------- ----
---- --------
--
----- -
-------- --
-
-
---
------------ -- -
-- ----- -
-----------------
----- ----
-
------------------ ------------
---调整图像大小和质量
resize 对象可以调整图像的大小和比例。例如：
sharpOptions: {
resize: {
width: 800,
height: 600,
fit: 'inside'
}
}以上代码将图像缩小到 800 x 600 的尺寸，并使用 inside 策略适应图像框大小。还可以使用 outside 策略适应图像区域大小。例如：`
sharpOptions: {
resize: {
width: 800,
height: 600,
fit: 'outside'
}
}同时，sharpOptions 对象还可以指定压缩质量和格式：
sharpOptions: {
jpeg: {
quality: 75
},
png: {
quality: 60
}
}quality 的值范围从 0 到 100，值越高，图像质量越好，但文件大小也越大。
支持的格式
@emanueleperuffo/metalsmith-sharp 支持的格式有：
JPEGPNGGIFWEBPAVIFHEIF
总结
@emanueleperuffo/metalsmith-sharp 是一个非常有用的 Metalsmith 插件，可以帮助开发人员自动调整图像大小、旋转和调色，并能生成多种格式，以适应不同的屏幕和设备。在实际项目开发中，可以根据实际需要自行配置，优化图片体验，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da681e8991b448db654