〇、图片处理库介绍
- 高性能图像处理:
sharp
、gm
- 简单图片操作:
Jimp
、lwip
- 颜色提取:
node-vibrant
- 图片压缩:
imagemin
- 基于 Canvas 的绘图:
canvas
- 高质量缩放:
pica
以上只列举了几种,每个插件各有侧重点,选择时可以根据项目需求和性能要求来定。 这里只对sharp的使用,简单介绍。
一、sharp简介以及安装
1、简介
【中文文档】、【英文文档】
sharp
是一个 Node.js 插件,用于处理图像文件。它支持高效的图像处理,包括缩放、裁剪、旋转、格式转换等常用操作,且在处理大批量图像时表现出色。
-
高性能:
sharp
使用 libvips 库,相比其他处理图像的库(如 GraphicsMagick 和 ImageMagick),占用内存更低、速度更快。 -
多种格式支持:支持 JPEG、PNG、WebP、GIF、SVG 等多种格式的读写。
-
处理灵活:可以进行图像压缩、裁剪、旋转、水印等多种处理。
-
跨平台:支持 Linux、macOS、Windows 等平台。
2、安装
由于 sharp
依赖 libvips 库,安装时需注意以下要求:
- Node.js 版本:建议使用 Node.js 12.13.0 或更高版本,确保兼容性和性能。
- 系统要求:在安装
sharp
时,通常会自动下载并构建 libvips,但在某些系统(如 Alpine Linux)上需要手动安装 libvips。
安装指令
bash
复制代码
# 使用 npm 安装
npm install sharp
# 使用 yarn 安装
yarn add sharp
3、基本用法示例
以下只列举了三种基本使用方法,
- 快速访问(未缓存的)图片元数据
- 图片格式转换:toFormat() 参数有限,不是所有类型都可转换。官方提供:
heic, heif, avif, jpeg, jpg, jpe, tile, dz, png, raw, tiff, tif, webp, gif, jp2, jpx, j2k, j2c, jxl
,目前来看基本够用了。 - 压缩png图片的质量
3.1、快速访问(未缓存的)图片元数据
// controller/sharpDemo.js
'use strict';
const fs = require("fs");
const sharp = require('sharp');
const Controller = require('egg').Controller;
class SharpDemoController extends Controller {
async sharpMetadata() {
const {ctx} = this;
const {files} = ctx.request;
const file = files[0];
const toBuffer = fs.readFileSync(file.filepath);
ctx.body = await sharp(toBuffer).metadata();
}
}
module.exports = SharpDemoController;
3.2、图片格式转换(转换为PNG)
// controller/sharpDemo.js
async sharpConvert() {
const {ctx} = this;
const {files} = ctx.request;
const file = files[0];
const toBuffer = fs.readFileSync(file.filepath);
const convertBuffer = await sharp(toBuffer).toFormat('png').toBuffer();
ctx.set('Content-Type', 'image/png');
ctx.set('Content-Disposition', 'attachment; filename="convert_image.png"');
ctx.body = convertBuffer;
}
3.1、压缩png图片的质量
// controller/sharpDemo.js
async sharpImageQuality() {
const {ctx} = this;
const {files} = ctx.request;
const file = files[0];
const toBuffer = fs.readFileSync(file.filepath);
// quality:设置压缩质量(质量值范围:0-100)
const convertBuffer = await sharp(toBuffer).png({quality: 50});
ctx.set('Content-Type', 'image/png');
ctx.set('Content-Disposition', 'attachment; filename="quality_image.png"');
ctx.body = convertBuffer;
}
4. 常见应用场景
- 图像缩略图生成:适合在图片网站或电商平台生成不同尺寸的缩略图。
- 图像压缩:便于优化图片大小以加快网页加载速度。
- 格式转换:可以将图片从一种格式转换为另一种格式(例如从 PNG 转为 WebP)。
- 动态图像处理:可用于生成具有不同尺寸或特效的图像,例如在 CMS 或博客平台中实现在线图像编辑。
使用 sharp
可以大幅简化图像处理流程,并提升处理效率,适合需要频繁操作图像的 Node.js 项目。