在前端开发中，我们经常需要生成不同尺寸的图片用于移动端或网站上的各种需求，但是手动处理这些图片相当耗费时间和精力。与此同时，如果需要每个新项目中处理图片，这将是一项重复繁琐的任务。npm 包 app-image-generator 就是解决这问题的一种优秀解决方式。
本教程将带领读者了解如何使用 app-image-generator 进行图片处理的基本操作和常用功能，推荐知识零基础的初学者和在公司工作的前端开发人员使用本教程。
环境和先决条件
在开始使用 app-image-generator 这个 npm 包之前，需要先确保您拥有以下环境和先决条件：
安装
在确保您的环境和先决条件都满足后，您可以开始安装 app-image-generator 包。使用以下命令进行安装：
npm i app-image-generator --save-dev
常用操作
以下是一些 app-image-generator 包中最基本的使用方法，谨记，在进行图片生成前，请确保将图片存储到 src/images 目录下。
生成不同尺寸的图片
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----------------------------
--------- -------------
---------- ---------------
------ -
------ ----
------- ----- -----
------ ------ ----
-
--inputDir- 存储原始图片的文件夹路径outputDir- 存储生成图片的文件夹路径sizes- 一个对象，其中包含要生成的每种尺寸及其对应大小值，可通过数组来设置具体宽高尺寸
在上述示例的情况下，将生成名字分别为 small.jpg， medium.jpg 和 large.jpg 的三个不同尺寸的图片，分别位于 build/images 目录下。
旋转某张图片
您还可以使用 app-image-generator 包来旋转一张图片。使用以下命令旋转图片：
const appImageGenerator = require('app-image-generator');
appImageGenerator.rotate({
inputDir: 'src/images',
fileName: 'image.jpg',
degrees: 90,
outputDir: 'build/images'
})inputDir- 存储原始图片的文件夹路径fileName- 要旋转的图片名degrees- 要旋转的角度值outputDir- 存储生成图片的文件夹路径
在上述示例的情况下，将生成一个名为 image.jpg 的旋转过90度的图片文件，位于 build/images 目录下。
缩放某张图片
缩放图片是生成不同尺寸图片的基础， 使用 app-image-generator 包的 resize 方法可以轻松缩放图片。使用以下命令来缩放图片：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
--------------------------
--------- -------------
--------- ------------
---------- ---------------
------ -
------ ----
------- ----- -----
------ ------ ----
-
--inputDir- 存储原始图片的文件夹路径fileName- 要缩放的图片名（可以是任何类型的图片文件）outputDir- 存储生成图片的文件夹路径sizes- 一个对象，其中包含要生成的每种尺寸及其对应大小值，可通过数组来设置具体宽高尺寸
在上述示例的情况下，将生成三个名字分别为 small.jpg， medium.jpg 和 large.jpg 的缩放后的图片文件，它们将位于 build/images 目录下。
结论
这是一份可用性极强的资源，降低程序员的工作负担，让他们可以专注于创意实现而不必担心细节问题。App-image-generator 无论是在上线多个项目时还是在单个团队协作开发时都大有用武之地。 在您的开发流程中包括此库，将为您带来便利和心流体验。始终记住通过图像激发创意，而不是消耗时间和精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0081e8991b448d99f5