介绍
在前端开发中，图片处理是一个非常重要的环节。其中，图片上传、裁剪和添加水印是常见的需求。本文将介绍如何使用 Express.js 实现这些功能，同时提供示例代码供读者参考。
准备工作
为了实现图片上传、裁剪和添加水印功能，需要安装以下三个 npm 包：
- multer：处理文件上传
- jimp：处理图片裁剪和添加水印
- express：用于搭建服务器
运行以下命令安装这些 npm 包：
npm install multer jimp express --save
图片上传
在 Express.js 中处理文件上传非常简单，只需要使用 multer 中间件即可。以下是示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ---------- --- ------------------- ----------------------- ----- ---- ----- -- - -- ------------ ---展开代码
在上面的代码中，首先导入了 express 和 multer 包。然后创建了一个 express 实例，并使用 multer 中间件来处理文件上传。其中，upload.single('image') 表示上传的是单个文件且文件上传字段名为 image。在上传成功后，我们可以在回调函数中进行文件处理逻辑。
图片裁剪
使用 jimp 包来处理图片裁剪非常方便。以下是示例代码：
const Jimp = require('jimp'); Jimp.read('test.jpg', (err, image) => { if (err) throw err; image.crop(100, 100, 200, 200).write('crop.jpg'); });
在上面的代码中，我们首先导入了 jimp 包。然后通过 Jimp.read 方法加载图片，当图片加载成功后，可以使用 image.crop 方法来裁剪图片，其中四个参数分别表示裁剪区域的左上角 x 坐标、左上角 y 坐标、裁剪后的宽度和高度。最后，可以使用 image.write 方法保存裁剪后的图片。
图片水印
使用 jimp 包来添加图片水印也非常方便。以下是示例代码：
-- -------------------- ---- ------- ----- ---- - ---------------- --------------------- ----- ------ -- - -- ----- ----- ---- ------------------------------------------------ -- - ----------------- --- --- ------ ------------------------------- --- ---展开代码
在上面的代码中，首先同样导入了 jimp 包。然后通过 Jimp.read 方法加载图片，当图片加载成功后，可以使用 Jimp.loadFont 方法加载字体，需要指定字体名称和字体大小等参数。最后，可以使用 image.print 方法将文本添加到图片中，其中四个参数分别表示字体、文本的左上角 x 坐标、左上角 y 坐标和要添加的文本内容。最后，使用 image.write 方法保存添加水印后的图片。
结语
本文介绍了如何使用 Express.js 实现图片上传、裁剪及水印功能。其中，图片上传使用了 multer 包，图片裁剪和水印使用了 jimp 包。通过本文的介绍，读者可以清楚地了解这些功能的实现原理，并可以参考示例代码进行实际开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67937a0a504e4ea9bd7be694
