NodeJs(EggJs)图片处理库 --- Sharp

790 阅读3分钟

〇、图片处理库介绍

  1. 高性能图像处理sharpgm
  2. 简单图片操作Jimplwip
  3. 颜色提取node-vibrant
  4. 图片压缩imagemin
  5. 基于 Canvas 的绘图canvas
  6. 高质量缩放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、基本用法示例

以下只列举了三种基本使用方法,

  1. 快速访问(未缓存的)图片元数据
  2. 图片格式转换:toFormat() 参数有限,不是所有类型都可转换。官方提供: heic, heif, avif, jpeg, jpg, jpe, tile, dz, png, raw, tiff, tif, webp, gif, jp2, jpx, j2k, j2c, jxl,目前来看基本够用了。
  3. 压缩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 项目。