Sharp.js：高性能 Node.js 图像处理库实战指南
在现代 Web 开发中，图像处理是不可或缺的一环。无论是前端展示优化，还是后端图像压缩与格式转换，一个高效、灵活的图像处理工具都至关重要。本文将介绍基于 Node.js 的高性能图像处理库 —— Sharp.js，涵盖其基本用法、进阶技巧以及在实际项目中的应用建议。
📌 什么是 Sharp.js？
Sharp.js 是一个基于 libvips 的 Node.js 图像处理库，专为高性能和低内存占用而设计。与传统的图像处理工具如 ImageMagick 或 GraphicsMagick 相比，Sharp.js 在处理大型图像时速度提升可达 4 至 5 倍。它支持多种图像格式，包括 JPEG、PNG、WebP、AVIF、GIF、TIFF 和 SVG，适用于 Node.js、Deno 和 Bun 等 JavaScript 运行时环境。([LogRocket Blog][2])
🚀 安装与基本使用
安装
确保你的 Node.js 版本为 18.17.0 或更高，然后通过 npm 或 yarn 安装 Sharp.js：
npm install sharp
# 或者
yarn add sharp
图像缩放示例
以下代码将加载 input.png，将其缩放至 300x200 像素，并保存为 output.jpg：
const sharp = require('sharp');
sharp('input.png')
.resize(300, 200)
.toFile('output.jpg')
.then(() => console.log('图像已缩放并保存！'))
.catch(err => console.error('图像处理出错：', err));
🔧 进阶用法
图像压缩
将图像转换为 WebP 格式，并设置质量为 50，以实现高效压缩：
sharp('input.png')
.webp({ quality: 50 })
.toFile('compressed.webp');
图像旋转
将图像顺时针旋转 90 度：
sharp('input.png')
.rotate(90)
.toFile('rotated.jpg');
图像裁剪
从图像中提取指定区域（左上角坐标为 (100, 100)，宽高为 200x200）：
sharp('input.png')
.extract({ left: 100, top: 100, width: 200, height: 200 })
.toFile('cropped.jpg');
图像合成（添加水印）
将 logo.png 作为水印添加到 input.png 的中心位置：
sharp('input.png')
.composite([
{ input: 'logo.png', gravity: 'center' },
])
.toFile('combined.png');
🧠 实用技巧与建议
处理图像元数据
提取图像的元数据信息，如格式、尺寸、颜色空间等：([DigitalOcean][3])
const metadata = await sharp('input.png').metadata();
console.log(metadata);
使用 Buffer 处理图像
当图像数据以 Buffer 形式存在时，可直接进行处理，无需保存为文件：([DigitalOcean][3])
const imageBuffer = fs.readFileSync('input.png');
const outputBuffer = await sharp(imageBuffer)
.resize(300, 200)
.toBuffer();
在 Electron 中的应用
虽然 Sharp.js 是基于 Node.js 的模块，但在 Electron 中使用时需注意其依赖的系统级库。确保在 Electron 的主进程中引入 Sharp.js，并处理好与渲染进程之间的通信，以实现图像处理功能。
✅ 总结
Sharp.js 是一个功能强大且高效的图像处理库，适用于多种场景，包括 Web 应用的图像优化、批量图像处理工具的开发等。其丰富的 API 和出色的性能，使其成为 Node.js 开发者进行图像处理的首选工具。
更多信息和详细文档，请访问 Sharp.js 官方网站 或其 GitHub 仓库。