nodejs处理图片的几种方法,使用sharp，jimp，webconvert

时间：2025-03-04 07:02:52

使用sharp

Sharp是一款快速高效的图片处理库，支持图片格式转换、尺寸调整、压缩、裁剪、旋转、水印等功能。以下是使用Sharp库的基本步骤：

1. 安装Sharp库

安装Sharp库可以使用npm命令：

npm install sharp

2. 调用Sharp库

在代码中调用Sharp库，可以先引入Sharp库：

const sharp = require('sharp');

3. 图片格式转换

利用Sharp库，可以将图片格式转换为其它格式，例如将JPEG图片转换为PNG图片：

sharp('')
  .toFormat('png')
  .toFile('', (err, info) => {
   // 处理错误或完成后的回调函数
});

4. 尺寸调整

利用Sharp库，可以调整图片的尺寸，例如将图片宽度调整为800像素：

sharp('')
  .resize(800, null)
  .toFile('', (err, info) => {
    // 处理错误或完成后的回调函数
  });

5. 压缩

利用Sharp库，可以压缩图片文件大小，例如将图片文件压缩为50%：

sharp('')
  .jpeg({ quality: 50 })
  .toFile('', (err, info) => {
    // 处理错误或完成后的回调函数
  });

6. 裁剪

利用Sharp库，可以裁剪图片，例如将图片裁剪为400x400像素：

sharp('')
  .resize(800, 800)
  .extract({ width: 400, height: 400, left: 200, top: 200 })
  .toFile('', (err, info) => {
    // 处理错误或完成后的回调函数
  });

7. 旋转

利用Sharp库，可以旋转图片，例如将图片逆时针旋转90度：

sharp('')
  .rotate(-90)
  .toFile('', (err, info) => {
    // 处理错误或完成后的回调函数
  });

8. 添加水印

利用Sharp库，可以在图片上添加水印，例如将文字“Hello World”添加到图片左上角：

sharp('')
  .resize(800, null)
  .overlayWith(('Hello World'), { gravity: 'northwest' })
  .toFile('', (err, info) => {
    // 处理错误或完成后的回调函数
  });

以上是使用Sharp库的基本步骤，具体使用可以根据具体需求进行调整。

使用jimp

Jimp 是一个用于 的图片处理库，它支持读取、操作和保存多种格式的图片，比如 PNG、JPEG、BMP、GIF 等等。以下是使用 Jimp 的基本步骤：

1. 安装 Jimp

通过 npm 命令安装 Jimp：

npm install jimp

2. 引入 Jimp

在代码中引入 Jimp 模块：

const Jimp = require('jimp');

3. 读取图片

使用 () 方法读取图片，并在回调函数中处理图片：

('path/to/', (err, image) => {
  if (err) throw err;
  // 对图片进行操作
});

4. 操作图片

Jimp 支持多种操作，比如调整大小、裁剪、旋转、缩放、滤镜等等。以下是一些常见的操作示例：

// 调整大小
(200, 200)

// 裁剪
(10, 10, 100, 100)

// 旋转
(45)

// 缩放
(0.5)

// 滤镜
().blur(5)

5. 保存图片

使用 () 方法保存图片：

('path/to/new/', (err) => {
  if (err) throw err;
  ('Image saved.');
});



####完整代码示例
const Jimp = require('jimp');

('path/to/', (err, image) => {
  if (err) throw err;
  
  (200, 200)
       .crop(10, 10, 100, 100)
       .rotate(45)
       .scale(0.5)
       .greyscale()
       .blur(5)
       .write('path/to/new/', (err) => {
         if (err) throw err;
         ('Image saved.');
       });
});

使用webconvert

webpconvert 是一个基于 的处理 WebP 图像的工具。使用它能够将 JPEG、PNG、GIF 等图片格式转换为 WebP 图片格式，以实现更好的图片压缩并提高网站性能。以下是使用 webpconvert 的方法：

1. 安装 和 npm（如果你还没有安装的话）。

2. 打开终端或命令行界面，使用 npm 安装 webpconvert：

npm install -g webp-convert

3. 转换一张图片格式为 WebP 格式的命令行语法如下：

npm install -g webp-convert

例如，在当前目录下有一张名为 "" 的 PNG 图片，将它转换为 WebP 格式并输出到 ""，可以使用以下命令：

webpconvert

4. 根据需要，可以添加一些选项来调整转换的质量和大小，例如：

- 调整输出图片质量等级：使用 "-q" 或 "--quality" 选项，并指定一个介于 0 到 100 之间的数字。

webpconvert   -q 80

- 调整输出图片大小：使用 "-r" 或 "--resize" 选项，并指定一个百分比或像素值。

webpconvert   -r 50%

- 转换图片并自动替换原文件（需使用 "-o" 或 "--overwrite" 选项）。

webpconvert  -o

更多选项和用法可以通过运行 "webpconvert --help" 命令来查看。

使用

是一款基于 HTML5 canvas 元素的图片裁剪工具，可以让用户*选择图片的大小和位置。 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，能够在服务器端运行 JavaScript 代码。在 中使用 需要先安装相关依赖和配置服务器。

安装

可以使用 npm 命令来安装 ：

npm install cropperjs --save

安装完成后，就可以在项目中引入 了：

const Cropper = require('cropperjs');

配置服务器

为了在 中使用 ，需要配置服务器，让服务器能够访问图片文件。可以使用 express 框架来创建服务器：

const express = require('express');
const app = express();

(('public'));

(3000, () => {
  ('Server started on port 3000.');
});

上面的代码创建了一个名为 app 的 express 应用，将项目根目录中的 public 文件夹设置为静态文件夹，用于存放图片文件。服务器启动后，可以在浏览器中访问 ```http://localhost:3000``` 查看是否配置成功。

使用

下面是使用 对图片进行裁剪的示例代码：

const express = require('express');
const app = express();
const path = require('path');

(('public'));

('/', (req, res) => {
  ((__dirname, ''));
});

('/crop', (req, res) => {
  const cropper = new Cropper(, {
    aspectRatio: 1 / 1,
    crop(event) {
      ();
      ();
      ();
      ();
    },
  });

  ().toBlob((blob) => {
    (blob);
  });
});

(3000, () => {
  ('Server started on port 3000.');
});

这段代码创建了一个名为 cropper 的 Cropper 实例，用于对图片进行裁剪。其中，`````` 表示要裁剪的图片路径，```aspectRatio``` 表示裁剪框的长宽比，```crop``` 是一个回调函数，用于在裁剪框发生变化时输出裁剪框的坐标和大小。

在裁剪完成后，使用 ```getCroppedCanvas()``` 方法将裁剪后的图片输出为一个 canvas 元素，再使用 ```toBlob()``` 方法将 canvas 元素转换成 Blob 对象，最后将 Blob 对象通过 HTTP 响应发送给客户端。

注意事项

在使用 时需要注意以下几点：

1. 图片必须先加载完成后才能进行裁剪，否则会出现错误；
2. 裁剪后的图片会通过 HTTP 响应发送给客户端，需要设置正确的 MIME 类型；
3. 依赖 HTML5 的 canvas 元素，不支持 IE8 及以下的浏览器。
 

相关文章