前言
在 Web 开发过程中，我们经常需要在网站中使用图片。但是有时候我们需要对图片进行裁剪，比如需要将图片中间的部分截取出来。Node.js 中提供了 Node-canvas 模块，我们可以使用这个模块实现图片的裁剪功能。
Fastify 是一个轻量级、快速的 Node.js Web 框架。在 Fastify 中使用 Node-canvas 也非常简单。本文将介绍如何在 Fastify 框架中使用 Node-canvas 实现图片裁剪功能。
安装 Node-canvas
在使用 Node-canvas 之前，我们需要安装它。可以使用 npm 进行安装：
npm install canvas
实现图片裁剪功能
接下来，我们来看一下如何使用 Node-canvas 实现图片裁剪功能。
首先，我们需要在代码中导入 Node-canvas 模块：
const { createCanvas, loadImage } = require('canvas');然后，我们需要定义一个处理图片裁剪的路由：
fastify.post('/crop', async (request, reply) => {
// ...
})在这个路由中，我们使用了 Fastify 的异步路由处理函数 async。使用 async 可以让我们在函数中使用异步操作，比如加载图片和裁剪图片。
接下来，我们需要获取用户上传的图片。我们可以使用 request.body 来获取请求体中的图片数据。我们先把图片数据保存到一个临时文件中，然后使用 Node-canvas 加载该图片：
-- -------------------- ---- ------- ----- -- - -------------- ----- - --------- - - ---------------- ----- --------- - ------------------------ ----- - ------------- --------- - - ------------------ --------------------- ----- --------- ------ -- - ----- - ---- - - ------------- ----- ----------- - ---------- ----- ---------------------- ------ ----- ----- - ----- ----------------------- ----- ------ - ------------------------- -------------- ----- --- - ------------------------ -------------------- -- --- ---
在这段代码中，我们使用了 Node.js 内置的 fs 模块，通过 promisify 将其转换为 Promise，然后我们使用 writeFile 将图片数据写到一个临时文件中。
接下来，我们使用 Node-canvas 的 loadImage 函数加载临时文件中的图片，然后创建一个与该图片大小相同的 Canvas，然后使用 getContext 获取 Canvas 上下文，将图片绘制到 Canvas 上。
现在，我们已经将图片绘制到了 Canvas 上，接下来就是裁剪图片的过程。我们可以使用 Canvas 的 getImageData 函数获取一个区域的像素数据，然后将这些像素数据绘制到一个新的 Canvas 上，从而实现图片裁剪：
-- -------------------- ---- -------
----- -- - --------------
----- - --------- - - ----------------
----- --------- - ------------------------
----- - ------------- --------- - - ------------------
--------------------- ----- --------- ------ -- -
----- - ----- -- -- ------ ------ - - -------------
----- ----------- - ----------
----- ---------------------- ------
----- ----- - ----- -----------------------
----- ------ - ------------------------- --------------
----- --- - ------------------------
-------------------- -- ---
----- ------------- - ------------------- --------
----- ---------- - -------------------------------
----- --------- - ------------------- -- ------ --------
---------------------------------- -- ---
----- ---------------- - -------------------------------------
-----------------------------------------------
---------------------- ----- -- -
-- ----- ----- ----
---
---在这段代码中，我们根据用户传入的裁剪区域获取该区域的像素数据，然后将这些像素数据绘制到一个新的 Canvas 上。最后，我们将裁剪后的图片转换为 Base64 格式后返回给客户端。
示例代码
完整的代码示例如下：
-- -------------------- ---- -------
----- -- - --------------
----- - --------- - - ----------------
----- --------- - ------------------------
----- - ------------- --------- - - ------------------
----- ------- - ---------------------
--------------------- ----- --------- ------ -- -
----- - ----- -- -- ------ ------ - - -------------
----- ----------- - ----------
----- ---------------------- ------
----- ----- - ----- -----------------------
----- ------ - ------------------------- --------------
----- --- - ------------------------
-------------------- -- ---
----- ------------- - ------------------- --------
----- ---------- - -------------------------------
----- --------- - ------------------- -- ------ --------
---------------------------------- -- ---
----- ---------------- - -------------------------------------
-----------------------------------------------
---------------------- ----- -- -
-- ----- ----- ----
---
---
-------------------- -- -- -
------------------- -- --------- -- ------------------------
---总结
使用 Node-canvas 实现图片裁剪功能非常简单，只需要将图片绘制到 Canvas 上，然后根据需要裁剪 Canvas 上的像素数据即可。在 Fastify 框架中使用 Node-canvas 也非常简单，我们只需要导入 Node-canvas 模块，然后使用异步处理函数即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ff2f448841e9894f74c8a