使用 Deno 构建不足 100 行的图像缩放 API

使用 Deno 构建一个不足 100 行代码的简单图像缩放 API

在本教程中，我们将使用 Deno 构建一个简单的图像缩放 API，整个项目代码不足 100 行。通过这个教程，你将学习如何快速创建一个支持图像调整大小和裁剪功能的 API，并将其部署到线上。

创建项目目录和初始化文件

首先，为项目创建一个新的目录。在该目录下，创建一个名为 main.ts 的 TypeScript 文件。接下来，打开终端，进入该目录并运行以下命令以启动脚本：

deno run --allow-net main.ts

运行后，打开浏览器访问 localhost:8000，你应该会看到页面显示“Hello World!”。

添加图像处理功能

接下来，我们将为项目添加图像处理功能。在 main.ts 文件中，首先从 imagemagick_deno 库中导入所需内容。然后，初始化 ImageMagick，为其二进制文件及 API 配置必要的环境。

参数解析函数 parseParams

我们需要创建一个名为 parseParams 的新函数，用于解析请求中的参数。该函数的主要功能包括：

• 检查必要的参数：image（图像 URL）、height（高度）和 width（宽度）。

在 serve() 函数中，我们可以通过查询字符串获取这些参数，并调用 parseParams 进行解析。

获取远程图像

在 serve() 函数中，调用 parseParams 后，我们需要实现一个函数 getRemoteImage，用于从远程 URL 下载图像，并处理可能出现的错误。

修改图像大小

创建一个名为 modifyImage 的新函数，该函数接受两个参数：imageBuffer（图像数据缓冲区）和 params（解析后的参数对象）。在这个函数中，我们将使用 MagickGeometry 构造函数设置调整大小的参数。

为了支持自适应调整大小，如果参数中缺少 height 或 width，我们需要将 ignoreAspectRatio 设置为 false。最后，该函数返回一个 Promise，解析为调整大小后的图像数据（Uint8Array）。

在 serve() 函数中，调用 getRemoteImage 后，添加对 modifyImage 的调用，并返回一个包含修改后图像的 Response。

添加裁剪功能

为了增强 API 的灵活性，我们可以为其添加裁剪功能。在某些情况下，裁剪图像可以避免因改变纵横比而导致的图像变形。

在 parseParams 函数中，添加对 mode 参数的支持，用于指定操作模式（resize 或 crop）。然后，在 modifyImage 函数中，根据 mode 参数决定是否调用 image.crop() 方法进行裁剪。

测试 API

现在，你可以运行以下命令启动 API：

deno run --allow-net main.ts

然后，通过以下 URL 测试 API：

http://localhost:8000/?image=https://deno.land/images/artwork/deno_city.jpeg&width=500&height=500

访问后，你应该会看到调整大小后的图像结果：

部署到 Deno Deploy

完成 API 开发后，我们可以将其部署到 Deno Deploy。以下是部署步骤：

1. 创建一个包含 main.ts 文件的 GitHub 仓库。
2. 访问 Deno Deploy，并连接你的 GitHub 账户。
3. 在 Deno Deploy 中创建一个新项目，选择刚刚创建的 GitHub 仓库。
4. 配置为“GitHub 自动部署”，每次合并到 main 分支时都会自动部署。
5. 设置入口点为 main.ts。

部署完成后，你的 API 将在几分钟内上线。此时，你可以通过分配的 URL 访问你的图像缩放 API。

总结

通过本教程，我们成功使用 Deno 构建了一个简单的图像缩放 API，并实现了图像调整大小和裁剪功能。整个项目代码精简且高效，非常适合初学者学习和实践。最后，我们还将 API 部署到 Deno Deploy，使其可以在线访问。希望本教程对你有所帮助！

原文链接: https://deno.com/blog/build-image-resizing-api