在现代 Web 应用中，图像处理是常见的需求之一。为了更好地满足这些需求，不仅需要使用传统的图像处理库，还需要结合文档数据库来存储和管理图像。在本文中，我们将介绍如何使用 MongoDB 进行图像处理，创建适合于 Web 应用的 image store，基于该存储系统实现一些简单的图像处理任务。
MongoDB 的基础知识
在开始之前，我们需要先对 MongoDB 进行一些介绍。MongoDB 是一种 NoSQL 数据库，其最大的优点在于可以快速轻松地存储和处理大量的数据（如图像）。MongoDB 使用文档模型来组织数据，文档是一种比传统的表格更加灵活的数据结构，可以将各种类型的数据存储在同一个文档中。MongoDB 还支持高可用性、可扩展性和自动分片等高级特性，并提供了强大的查询语言和索引支持。
创建 image store
在本文中，我们将使用 Node.js 和 MongoDB 创建一个简单的 image store。首先，需要安装 Node.js 和 MongoDB。在安装完成后，创建一个新的 Node.js 项目，并安装以下依赖项：
npm install express mongodb multer sharp
接下来，创建一个 app.js 文件，并添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - -------------------------------
----- ------ - ------------------
----- ----- - -----------------
----- --- - ----------
----- ---- - ---------------- -- -----
----- ------ - -------- ------- - --------- -------- -- ----- ---------- ---
------------------------------------------------ ----- ------- -- -
-- ----- ------ -------------------
---------------------- ------------ -- ---------
----- -- - -------------------------
----- ---------- - ------------------------
------------------- ----------------------- ----- ---- -- -
----- ----- - -
--------- ----------------------
------------ ------------------
----- -----
--
----- -------- - --------
-------------------- ------------------------------------ ----- -- -
-- ----- ------ -------------------
---------- - -----
--------------------------- ----- ------- -- -
-- ----- ------ -------------------
------------------
---
---
------------------------------
---
------------ ----- ---- -- -
------------------------------- ------- -- -
-- ----- ------ -------------------
----------
--------- ----------
----- ------------- ----------------------------- -----------------
------ ----------- ------------ ----------
------- -----------------------------
-------
----
------------------ -- -
--------------------------
---- ------------------------- ----------
------------
---
---
---
--------------------- ----- ---- -- -
-------------------- ---- --- ------------------------------------------ -- ----- ------ -- -
-- ----- ------ -------------------
-----------------------------------
--------------------
---
---
---------------- -- -- ------------------- --------- -- ---- ------------
---在以上代码中，我们实现了一个简单的 image store，使用 Multer 处理图像上传和 Sharp 处理图像缩放和转换。我们还定义了两个路由：/upload 和 /image/:id。上传图像时，我们将原始文件名、文件类型和文件数据存储在 MongoDB 集合中。我们还支持查看图像，如 /image/:id 路由所示。
图像处理
现在，我们已经创建了一个图像存储，可以开始对这些图像进行处理了。在本文中，我们将演示如何使用 Sharp 对图像进行缩放、裁剪和旋转。
缩放图像
首先，让我们来看看如何缩放图像。如上所述，我们已经在上传图像时使用 Sharp 对图像进行缩放。在以下示例中，我们使用 Sharp 对图像进行更高级的缩放，使用 sharp.extract 和 sharp.resize 进行将图像放置到画布上，并按比例缩放图像。
-- -------------------- ---- -------
-------------------- ---- --- ------------------------------------------ -- ----- ------ -- -
-- ----- ------ -------------------
----- -------- - ------------------
----------------------- --------- -- -
-- ----- ------ -------------------
----- ----------- - ----
----- ------------ - ----
----- ------ - ----------- - ---------------
----- ------ - ------------ - ----------------
----- ----- - ---------------- --------
------------------
----- --------------- - ----------- - ------ - --
---- ---------------- - ------------ - ------ - --
------ ----------- - ------
------- ------------ - ------
---------------------- ---------------------------- ----- -- -
-- ----- ------ -------------------
---------- - -----
---------------------- ----- ------- -- -
-- ----- ------ -------------------
------------------
---
---
---
---在此示例中，我们获取了原始图像的元数据，并根据元数据计算图像的缩放比例。然后，我们使用 sharp.extract 和 sharp.resize 方法将图像放置到一个宽度为 640、高度为 480 的画布上，并按比例缩放图像。最后，将缩放后图像的数据保存到 MongoDB。
裁剪图像
接下来，让我们来看看如何裁剪图像。在下面的示例中，我们使用 Sharp 对图像进行裁剪，并保存裁剪后的缩略图。
-- -------------------- ---- -------
-------------------- ---- --- ------------------------------------------ -- ----- ------ -- -
-- ----- ------ -------------------
----- -------- - ------------------
----------------------- --------- -- -
-- ----- ------ -------------------
----- ----- - ----
----- ------ - ----
---------------------- ------- - ---- ------- ----------------- ----- -- -
-- ----- ------ -------------------
----------------------
--------- ------------ - ---------------
------------ ------------------
----- -----
-- ----- ------- -- -
-- ----- ------ -------------------
------------------
---
---
---
---在此示例中，我们使用 sharp.resize 方法并设置 fit 选项为 cover。这使得裁剪宽度和高度的图像即使在缩放过程中也能保留其完整性。我们还将缩略图的数据插入到 MongoDB 中。
旋转图像
最后，让我们来看看如何旋转图像。在下面的示例中，我们使用 Sharp 旋转图像。
-- -------------------- ---- -------
-------------------- ---- --- ------------------------------------------ -- ----- ------ -- -
-- ----- ------ -------------------
----- -------- - ------------------
---------------------------------- ----- -- -
-- ----- ------ -------------------
---------- - -----
---------------------- ----- ------- -- -
-- ----- ------ -------------------
------------------
---
---
---在此示例中，我们使用 sharp.rotate 方法并将旋转角度设置为 90，这会将图像旋转 90 度。最后，我们将旋转后的图像数据保存到 MongoDB 中。
总结
在本文中，我们介绍了如何使用 MongoDB 进行图像处理，创建了一个简单的 image store，并演示了使用 Sharp 对图像进行缩放、裁剪和旋转。这使得我们可以基于 MongoDB 创建更加灵活的 Web 应用程序，并充分利用 MongoDB 的优势。希望这篇文章对你会有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e36027f6b2d6eab3ed4db8