介绍

在本文中，我们将构建一个命令行接口（CLI）应用程序，以协助创建图像副本，从而将图像副本为任何数量的指定尺寸。此工具可能非常有用，并节省大量时间，尤其是当构建需要不同图像尺寸以在应用程序的不同部分显示的移动应用程序时。

您可以在此处通过github下载代码：https://github.com/evanryan210/sharp-resize

入门

对于此CLI应用程序，我们需要安装一些节点软件包。我们将使用Node软件包管理器，因此请确保您目前已经安装了该软件包。如果您没有安装它，则可以在此处下载：https://nodejs.org/en/download。安装我们将要使用的软件包的命令在下面列出。

npm install sharp
npm install fs
npm install path

尖锐：一个高速节点。 fs ：一个允许您与计算机上的文件系统一起工作的模块。
路径：路径模块提供了一种使用目录和文件路径的方式。

在我们的项目文件夹中，让我们制作一个json文件并将其命名为resize.json。这是我们将要调整大小的图像的路径，我们想要将调整大小的图像保存到的目的地的路径以及所需尺寸的数组。

{
    "imagePath" : "[IMAGE PATH TO BE RESIZED]",
    "outputPath": "[DESTINATION FOLDER PATH TO STORE IMAGES]",
    "settings": {
        "ios": [20,29,40,40,58,60,60,76,80,87,120,120,152,167,180,1024],
        "android": [36,48,64,72,96,144,192,512]
    }
}

注意：您可以添加所需的许多'settings'值。对于此示例，我做了两个

设置观察者

如果您不知道，由于我们使用的是打字稿，我们必须在以节点运行代码之前对代码进行编译。为了避免每次更改应用程序时都必须编译，我更喜欢在终端上运行观察者以节省一些时间。该观察者将寻找我们文件中的更改并立即编译。运行观察者的命令如下：

tsc -w

，您的终端应该显示这样的东西：

[5:05:25 PM] Starting compilation in watch mode...

[5:05:27 PM] Found 0 errors. Watching for file changes.

（p.s。确保不要意外关闭此终端）

index.ts

现在，我们将在项目的root index.ts文件中工作。让我们首先定义刚创建的JSON对象的“类型” PlatformData。

type PlatformData = {
    imagePath: string,
    outputPath: string,
    settings: Record<string, number[]>
}

现在，我们将使用我们安装的fs模块使用fs.readFileSync()方法从我们的resize.json文件获取数据。

const data = fs.readFileSync(path.join(`resize.json`), 'utf8');
const parsedData: PlatformData = JSON.parse(data);
const imgPath = parsedData.imagePath //"[IMAGE PATH]"
const folderPath = parsedData.outputPath //"[DESTINATION FOLDER PATH]"

然后，我们将分析数据并将其存储在变量parsedData中。现在，我们可以使用这些解析的数据，还可以创建imgPath和folderPath。

现在让我们制作将将图像大小和平台作为参数的实际函数，并在指定路径的调整大小图像数据中给我们一个文件。

const resize = (imgSize: number, platform: string) =>{
    sharp(imgPath)
        .resize(imgSize)
        .toFile(`${folderPath}/${platform}/sample_${imgSize}.jpg`, function (err) {
        });
}

现在，我们要调整图像大小的功能已经完成，让我们确保有一个目录来存储新的调整大小图像，通过检查使用fs.existsSync(folderPath)是否存在。如果不存在，我们可以使用fs.mkdirSync(folderPath)创建一个文件夹，如下所示。

if (!fs.existsSync(folderPath)){
    fs.mkdirSync(folderPath)
}

最后，我们需要做一个try...catch，该try...catch将使用forEach()循环通过数组中的值迭代，并将图像大小调整到每个大小传递的大小。在此阶段之后，您拥有一个完整的调整大小应用！

try {
    const platforms = parsedData.settings
    Object.keys(platforms).forEach(platform => {
        if (!fs.existsSync(`${folderPath}/${platform}`)) {
            fs.mkdirSync(`${folderPath}/${platform}`)
            //Only if you want platform specific folders
        }
        const platformSizes = platforms[platform]
        platformSizes.forEach(size => {
            resize(size, platform)
        })
    })
    console.log(`Resizer has loaded images here: ${folderPath} `)
} catch (err) {
    console.error(err);
}

用法

要使用我们刚刚创建的应用程序，请确保resize.json具有imagePath和outputPath的正确值，然后简单地在终端中运行以下命令。

node index

我希望您喜欢这次演练！运气在您的编码工作中最好：D

作者，
埃文·瑞安（Evan Ryan），Orangespark Solutions