在现代 Web 开发中，图像数据是不可避免的一部分。GraphQL 是一种查询语言，用于 API 的开发，它可以让我们更加灵活地处理数据。在本文中，我们将探讨如何在 GraphQL 中处理图像数据，包括上传和处理图像数据。
前置知识
在阅读本文之前，请确保您已经熟悉以下内容：
- 基本的 GraphQL 知识
- 在后端处理文件上传的方法
上传图像
在 GraphQL 中上传图像文件有两种方式：Base64 编码和 FormData。
Base64 编码
Base64 编码是用于传输二进制数据的一种编码方法，将二进制数据转换成 ASCII 码表示的字符串。在 GraphQL 中，可以使用 Base64 编码来上传图像。
首先，客户端需要将图像数据转换成 Base64 字符串，然后作为参数传递给 GraphQL API。
mutation uploadImage($data: String!, $filename: String!) {
uploadImage(data: $data, filename: $filename) {
id
filename
}
}这里我们定义了一个名为 uploadImage 的 mutation，它接受 data 和 filename 两个参数。data 参数是一个 Base64 编码的字符串，表示要上传的图像数据。filename 参数是一个字符串，表示要保存的文件名。该 mutation 返回上传成功后生成的图片 ID 以及文件名。
在服务端，我们需要解码 Base64 字符串，将其保存为文件。
-- -------------------- ---- -------
------ -- ---- -----
----- -------- -------------- - ----- -------- -- -
----- ------ - ----------------- ----------
----- ---- - ----------------------
----- --------------------------- --------
------ -
--- --------
--------- --------
--
-上述代码将传入的 data 参数解码为二进制数据，并将其保存到 uploads 目录下，并返回上传成功后生成的图片 ID 以及文件名。
注意，Base64 编码会将原始数据增加约 33% 的大小，因此在上传大型图像时，可能会出现性能问题。
FormData
FormData 是一种用于在客户端发送表单数据的 API。在 GraphQL 中，可以使用 FormData 来上传图像。
首先，客户端需要将图像数据存储在 FormData 对象中，然后将该对象作为参数传递给 GraphQL API。
-- -------------------- ---- -------
----- ---- - --- -----------
------------------- ------
----------------------- ----------
----- -------- - ----- ----------------- -
------- -------
-------- -
---------------- ------- ---------
--
----- ----
---
----- ------ - ----- ----------------在服务端，我们需要使用相应的库来处理 FormData，并将其保存为文件。
-- -------------------- ---- -------
------ ---------- ---- -------------
----- -------- -------------- - ----- -------- -- -
----- ---- - ------------ ---------- ----- ---
--------------- ----- ------- ------ -- -
----- ------- - ----------------------
------------------------------ ---------
------ -
--- --------
--------- --------
--
---
-上述代码使用 formidable 库来处理 FormData，然后将文件保存到 uploads 目录下，并返回上传成功后生成的图片 ID 以及文件名。
处理图像数据
在 GraphQL 中，我们可以使用相应的库来处理图像数据。
使用 sharp 处理图像
sharp 是一个高性能图像处理库，可以轻松地进行缩放、裁剪、旋转和转换操作。我们可以使用 sharp 来对上传的图像进行处理。下面是一个使用 sharp 对图像进行调整大小和剪裁的示例。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- -------------- - --------- ---- -- -
----- ----- - -----------------------------
----- -------- - ----- -----------------
----- ----- - ---- - ---------------
----- ------ - ----- ------------------ -------------------------- - -------------------
------ -
--- --------
--------- ----------------------
----- -------------------------
--
-上述代码使用 sharp 对上传的图像进行缩放处理，并将处理后的图像保存为 Base64 编码的字符串。注意，在处理图像时，我们使用了 Promise，因为 sharp 的大部分操作都是异步的。另外，处理后的图像数据需要以字符串形式返回，因为 GraphQL 不支持二进制数据类型。
使用 Jimp 处理图像
Jimp 是一个功能齐全的图像处理库，支持大多数图像操作和格式。我们可以使用 Jimp 来对上传的图像进行处理。
-- -------------------- ---- -------
------ ---- ---- -------
----- -------- -------------- - --------- ---- -- -
----- ----- - ----- ---------------------------------
----------------- ------
----- ------ - ----- --------------------------------
------ -
--- --------
--------- ----------------------
----- -------------------------
--
-上述代码使用 Jimp 对上传的图像进行剪裁处理，并将处理后的图像保存为 Base64 编码的字符串。需要注意的是，Jimp 对象不支持直接转换为 Base64 编码，因此我们需要使用 getBufferAsync 方法将其转换为二进制数据，然后将其编码为 Base64 字符串。
结论
在本文中，我们介绍了在 GraphQL 中处理图像数据的方法，包括上传和处理图像数据。我们使用了两种上传图像的方法：Base64 编码和 FormData。同时，我们还介绍了两个处理图像数据的库：sharp 和 Jimp。通过使用这些库，我们可以轻松地对上传的图像进行处理，使其适应不同的需要。
希望本文可以对您在 GraphQL 中处理图像数据有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb945844713626015eee08