Node.js操作图像通常依赖成熟的三方库实现，不同库的功能侧重有所差异，开发者可以根据具体需求选择合适的工具。常见的图像操作场景包括尺寸调整、格式转换、滤镜添加、文字水印叠加等，这些需求都可以通过Node.js生态中的库高效完成。
主流图像处理库对比
目前Node.js生态中常用的图像处理库有以下几种，各自的特点如下：
| 库名称 | 核心特点 | 适用场景 |
|---|---|---|
| sharp | 基于libvips，处理速度快，内存占用低，支持常见格式转换、裁剪、缩放等操作 | 高性能批量图像处理、服务端常规图像操作 |
| canvas | 模拟浏览器canvas API，支持绘制图形、添加文字、合成图像 | 需要自定义绘制、添加复杂水印的场景 |
| jimp | 纯JavaScript实现，无原生依赖，安装简单 | 轻量需求、环境受限无法安装原生依赖的场景 |
使用sharp进行基础图像操作
sharp是目前Node.js生态中性能最优的图像处理库之一，下面通过示例演示常见操作。
环境准备
首先初始化项目并安装sharp依赖：
# 初始化Node.js项目 npm init -y # 安装sharp库 npm install sharp
图像缩放与格式转换
以下代码实现读取本地图像，将其缩放为宽度300像素，同时转换为webp格式并保存：
const sharp = require('sharp');
const path = require('path');
// 定义输入和输出路径
const inputPath = path.join(__dirname, 'input.jpg');
const outputPath = path.join(__dirname, 'output.webp');
// 执行图像处理
sharp(inputPath)
// 设置宽度为300，高度自动按比例适配
.resize(300)
// 转换为webp格式，设置质量为80
.webp({ quality: 80 })
// 保存处理后的图像
.toFile(outputPath)
.then(() => {
console.log('图像处理完成，输出路径：', outputPath);
})
.catch((err) => {
console.error('图像处理失败：', err);
});
添加文字水印
sharp本身不支持直接添加文字，需要结合sharp的复合操作，先生成文字图像再与原图合成：
const sharp = require('sharp');
const path = require('path');
async function addTextWatermark() {
const inputPath = path.join(__dirname, 'input.jpg');
const outputPath = path.join(__dirname, 'watermark_output.jpg');
// 创建文字水印图像，背景透明，文字为黑色
const textSvg = `
<svg width="200" height="50">
<text x="10" y="30" font-size="24" fill="rgba(0,0,0,0.5)">示例水印</text>
</svg>
`;
await sharp(inputPath)
// 将文字svg作为水印合成到原图右下角，偏移量10像素
.composite([{
input: Buffer.from(textSvg),
gravity: 'southeast',
left: 10,
top: 10
}])
.toFile(outputPath);
console.log('添加水印完成，输出路径：', outputPath);
}
addTextWatermark().catch(console.error);
使用canvas实现自定义绘制
如果需要更复杂的绘制操作，比如自定义图形、渐变效果，可以使用canvas库，安装命令为npm install canvas，以下是绘制矩形并叠加到图像上的示例：
const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');
const path = require('path');
async function drawOnImage() {
const inputPath = path.join(__dirname, 'input.jpg');
const outputPath = path.join(__dirname, 'canvas_output.jpg');
// 加载原图
const image = await loadImage(inputPath);
// 创建和原图尺寸相同的canvas
const canvas = createCanvas(image.width, image.height);
const ctx = canvas.getContext('2d');
// 绘制原图
ctx.drawImage(image, 0, 0);
// 绘制半透明蓝色矩形
ctx.fillStyle = 'rgba(0, 100, 255, 0.3)';
ctx.fillRect(50, 50, 200, 100);
// 添加矩形内文字
ctx.fillStyle = '#ffffff';
ctx.font = '20px sans-serif';
ctx.fillText('Canvas绘制内容', 70, 100);
// 将canvas内容保存为图像
const out = fs.createWriteStream(outputPath);
const stream = canvas.createJPEGStream({ quality: 0.9 });
stream.pipe(out);
out.on('finish', () => {
console.log('Canvas绘制完成，输出路径：', outputPath);
});
}
drawOnImage().catch(console.error);
操作注意事项
- 处理大尺寸图像时需要注意内存占用，sharp通过流式处理可以有效降低内存消耗，优先选择支持流操作的库
- 涉及文件路径操作时建议使用
path模块拼接路径，避免不同系统下的路径分隔符问题 - 生产环境中建议对图像操作添加异常捕获，避免因损坏的图像文件导致服务崩溃
- 如果处理大量图像，可以结合Node.js的worker_threads实现并发处理，提升处理效率
Node.jsimage_processingsharpcanvasfile_system修改时间：2026-06-11 10:00:20