在前端开发中，图片上传及处理是常见的需求。Deno 是一个新兴的 JavaScript 运行时，它提供了一些强大的功能，包括异步操作、模块管理等，让开发者可以更加轻松地实现图片上传及处理的功能。本文将介绍如何使用 Deno 实现图片上传及处理的功能，并提供示例代码。
环境准备
在开始之前，需要安装 Deno 运行时。官方网站提供了 Mac、Linux 和 Windows 的安装程序，可以前往 官网 下载并安装。
实现图片上传
首先，需要了解如何在 Deno 中处理 HTTP 请求。Deno 对于 HTTP 请求的处理是基于标准库中的 http 模块实现的。因此，可以使用该模块来实现图片上传的功能。
示例代码如下：
// javascriptcn.com 代码示例
import { serve } from "http";
const server = serve({ port: 8000 });
console.log("Server is running on http://localhost:8000");
for await (const req of server) {
if (req.method === "POST" && req.url === "/upload") {
const decoder = new TextDecoder();
const body = decoder.decode(await Deno.readAll(req.body));
console.log(body);
req.respond({ body: "Upload success" });
}
}该代码会启动一个监听 8000 端口的 HTTP 服务器，并对每个请求做出响应。在收到请求时，首先判断请求方法和 URL 是否符合要求，然后读取请求体中的数据以进行处理。
下面是如何使用 curl 命令发送 HTTP 请求的示例：
curl -X POST -d "Hello world!" http://localhost:8000/upload
可以看到，该命令向 http://localhost:8000/upload 地址发送了一个 POST 请求，并在请求体中包含一个字符串。如果一切正常，服务器会返回一个字符串表示上传成功。
但是，实际使用时，需要上传的不是字符串，而是图片。此时，需要在服务器端将请求体中的数据解析为图片格式。
以下是如何将请求体中的数据解析成图片格式的示例：
// javascriptcn.com 代码示例
if (req.method === "POST" && req.url === "/upload") {
const reader = await Deno.readAll(req.body);
const { type, extension, base64 } = parseImageData(reader);
const data = base64Decode(base64);
const fileName = `${Date.now()}.${extension}`;
await Deno.writeFile(`./uploads/${fileName}`, data);
req.respond({ body: "Upload success" });
}
function parseImageData(data: Uint8Array) {
const decoder = new TextDecoder();
const str = decoder.decode(data);
const reg = /^data:image\/([a-z]+);base64,(.+)$/s;
const matches = str.match(reg);
if (!matches) {
throw new Error("Invalid image data");
}
const [, type, base64] = matches;
const extension = getExtension(type);
return { type, extension, base64 };
}
function getExtension(type: string) {
switch (type) {
case "jpeg":
return "jpg";
case "png":
default:
return "png";
}
}
function base64Decode(base64: string) {
return new Uint8Array(atob(base64).split("").map((char) => char.charCodeAt(0)));
}这段代码会先读取请求体中的数据，然后使用 parseImageData 函数将其解析为图片格式。该函数会从数据中提取图片的类型、扩展名和 base64 编码的数据。由于 base64 编码的数据不能直接写入文件，因此还需要使用 base64Decode 函数将其解码为二进制数据。接着，将二进制数据写入文件，文件名为当前时间戳和扩展名组成的字符串。最后，返回一个成功消息给客户端。
可以使用以下命令测试上传功能：
curl -X POST -H "Content-Type: image/png" --data-binary "@test.png" http://localhost:8000/upload
该命令将上传名为 test.png 的 PNG 图片到服务器。如果一切正常，命令将返回一个上传成功的消息。
实现图片处理
完成图片上传之后，需要对上传的图片进行处理。这里以缩放图片为例，介绍如何使用 Deno 对上传的图片进行处理。
Deno 自带有一个标准库 std，其中包含了处理图片的模块 image。该模块提供了一些常见的图片处理功能，例如缩放、剪裁、旋转等。
以下是如何使用 image 模块对上传的图片进行缩放的示例：
// javascriptcn.com 代码示例
import { serve } from "http";
import { Image, ImageFormat } from "std/image/mod.ts";
const server = serve({ port: 8000 });
console.log("Server is running on http://localhost:8000");
for await (const req of server) {
if (req.method === "POST" && req.url === "/upload") {
const reader = await Deno.readAll(req.body);
const { type, extension, base64 } = parseImageData(reader);
const data = base64Decode(base64);
const img = new Image(data);
const { width, height } = img;
const newWidth = Math.min(400, width);
const newHeight = (newWidth / width) * height;
const scaled = img.resize(newWidth, newHeight);
const buf = scaled.toBuffer(ImageFormat.PNG);
const fileName = `${Date.now()}.${extension}`;
await Deno.writeFile(`./uploads/${fileName}`, buf);
req.respond({ body: "Upload and scale success" });
}
}该代码与上一段代码的区别在于，添加了一个对图片进行缩放的步骤，并将缩放后的图片保存到文件中。
上述示例中，用上传的图片创建了一个 Image 实例。然后，计算要缩放到的宽度和高度，并使用 resize 方法缩放图片。接下来，使用 toBuffer 方法将缩放后的图片转为二进制数据，并将其写入文件。最后，返回一个成功消息给客户端。
可以使用以下命令测试上传和缩放功能：
curl -X POST -H "Content-Type: image/png" --data-binary "@test.png" http://localhost:8000/upload
该命令将上传名为 test.png 的 PNG 图片并对其缩放。如果一切正常，命令将返回一个上传并缩放成功的消息。
总结
本文介绍了如何使用 Deno 实现图片上传及处理的功能，并提供示例代码。通过本文的介绍，读者可以了解如何在 Deno 中处理 HTTP 请求、解析上传的图片并对其进行处理。同时，也可以了解 Deno 的基本使用方法，为今后在前端开发中应用 Deno 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65434eeb7d4982a6ebcfc9a8