在前端开发中，图片上传及处理是常见的需求。Deno 是一个新兴的 JavaScript 运行时，它提供了一些强大的功能，包括异步操作、模块管理等，让开发者可以更加轻松地实现图片上传及处理的功能。本文将介绍如何使用 Deno 实现图片上传及处理的功能，并提供示例代码。
环境准备
在开始之前，需要安装 Deno 运行时。官方网站提供了 Mac、Linux 和 Windows 的安装程序，可以前往 官网 下载并安装。
实现图片上传
首先，需要了解如何在 Deno 中处理 HTTP 请求。Deno 对于 HTTP 请求的处理是基于标准库中的 http 模块实现的。因此，可以使用该模块来实现图片上传的功能。
示例代码如下：
-- -------------------- ---- -------
------ - ----- - ---- -------
----- ------ - ------- ----- ---- ---
------------------- -- ------- -- ------------------------
--- ----- ------ --- -- ------- -
-- ----------- --- ------ -- ------- --- ---------- -
----- ------- - --- --------------
----- ---- - -------------------- ------------------------
------------------
------------- ----- ------- -------- ---
-
-该代码会启动一个监听 8000 端口的 HTTP 服务器，并对每个请求做出响应。在收到请求时，首先判断请求方法和 URL 是否符合要求，然后读取请求体中的数据以进行处理。
下面是如何使用 curl 命令发送 HTTP 请求的示例：
curl -X POST -d "Hello world!" http://localhost:8000/upload
可以看到，该命令向 http://localhost:8000/upload 地址发送了一个 POST 请求，并在请求体中包含一个字符串。如果一切正常，服务器会返回一个字符串表示上传成功。
但是，实际使用时，需要上传的不是字符串，而是图片。此时，需要在服务器端将请求体中的数据解析为图片格式。
以下是如何将请求体中的数据解析成图片格式的示例：
-- -------------------- ---- -------
-- ----------- --- ------ -- ------- --- ---------- -
----- ------ - ----- -----------------------
----- - ----- ---------- ------ - - -----------------------
----- ---- - ---------------------
----- -------- - -----------------------------
----- --------------------------------------- ------
------------- ----- ------- -------- ---
-
-------- -------------------- ----------- -
----- ------- - --- --------------
----- --- - ---------------------
----- --- - --------------------------------------
----- ------- - ---------------
-- ---------- -
----- --- -------------- ----- -------
-
----- -- ----- ------- - --------
----- --------- - -------------------
------ - ----- ---------- ------ --
-
-------- ------------------ ------- -
------ ------ -
---- -------
------ ------
---- ------
--------
------ ------
-
-
-------- -------------------- ------- -
------ --- -------------------------------------------- -- ---------------------
-这段代码会先读取请求体中的数据，然后使用 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 模块对上传的图片进行缩放的示例：
-- -------------------- ---- -------
------ - ----- - ---- -------
------ - ------ ----------- - ---- -------------------
----- ------ - ------- ----- ---- ---
------------------- -- ------- -- ------------------------
--- ----- ------ --- -- ------- -
-- ----------- --- ------ -- ------- --- ---------- -
----- ------ - ----- -----------------------
----- - ----- ---------- ------ - - -----------------------
----- ---- - ---------------------
----- --- - --- ------------
----- - ------ ------ - - ----
----- -------- - ------------- -------
----- --------- - --------- - ------ - -------
----- ------ - -------------------- -----------
----- --- - ---------------------------------
----- -------- - -----------------------------
----- --------------------------------------- -----
------------- ----- ------- --- ----- -------- ---
-
-该代码与上一段代码的区别在于，添加了一个对图片进行缩放的步骤，并将缩放后的图片保存到文件中。
上述示例中，用上传的图片创建了一个 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