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

本教程将指导你使用 Deno 构建一个精简且功能齐全的图像缩放 API。通过本教程，你将掌握：

• 创建支持图像调整大小和裁剪的 API
• 快速实现参数解析和远程图像获取
• 部署到 Deno Deploy 上进行线上访问

整个项目代码量不足 100 行，非常适合初学者快速上手。

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

1. 创建新目录并进入：

mkdir deno-image-api
cd deno-image-api

2. 创建入口文件 main.ts：

touch main.ts

3. 启动基础服务：

deno run --allow-net main.ts

访问 http://localhost:8000，页面应显示 “Hello World!”。

二. 添加图像处理功能

1. 导入 imagemagick_deno 库：

import { ImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno/mod.ts";

2. 初始化 ImageMagick，设置二进制路径及 API 配置。

三. 参数解析函数 parseParams

创建函数 parseParams 用于解析请求参数：

• 必选参数：

  • image：图像 URL
  • width：缩放宽度
  • height：缩放高度（可选）

• 可选参数：

  • mode：操作模式（resize 或 crop）

示例：

function parseParams(url: URL) {
  const image = url.searchParams.get("image");
  const width = parseInt(url.searchParams.get("width") || "0");
  const height = parseInt(url.searchParams.get("height") || "0");
  const mode = url.searchParams.get("mode") || "resize";

  if (!image || !width) throw new Error("Missing required parameters");
  return { image, width, height, mode };
}

四. 获取远程图像

创建函数 getRemoteImage，用于下载图像数据：

async function getRemoteImage(url: string): Promise<Uint8Array> {
  const response = await fetch(url);
  if (!response.ok) throw new Error("Failed to fetch image");
  return new Uint8Array(await response.arrayBuffer());
}

五. 修改图像大小与裁剪

创建函数 modifyImage，支持调整大小和裁剪：

async function modifyImage(imageBuffer: Uint8Array, params: any): Promise<Uint8Array> {
  let image = await ImageMagick.read(imageBuffer);
  const geometry = new MagickGeometry(params.width, params.height);

  if (params.mode === "crop") {
    image.crop(geometry);
  } else {
    image.resize(geometry);
  }

  return await image.write();
}

在 serve() 函数中调用该方法，并返回处理后的图像：

return new Response(await modifyImage(buffer, params), { headers: { "Content-Type": "image/jpeg" } });

六. 测试 API

启动服务：

deno run --allow-net main.ts

测试 API：

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

访问后将看到调整大小后的图像：

七. 部署到 Deno Deploy

1. 将 main.ts 上传到 GitHub 仓库
2. 登录 Deno Deploy 并连接 GitHub
3. 创建新项目，选择仓库并设置入口文件为 main.ts
4. 配置 GitHub 自动部署，每次合并到 main 分支时自动更新

几分钟后，你的 API 即可线上访问。

八. 总结

通过本教程，你学会了：

• 使用 Deno 快速构建图像缩放 API
• 实现图像调整大小和裁剪功能
• 部署 API 到 Deno Deploy 供在线访问

整个项目简洁高效，非常适合初学者快速入门和实践。

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