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

使用sharp

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

1. 安装Sharp库

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

npm install sharp

2. 调用Sharp库

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

const sharp = require('sharp');

3. 图片格式转换

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

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

4. 尺寸调整

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

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

5. 压缩

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

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

6. 裁剪

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

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

7. 旋转

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

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

8. 添加水印

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

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

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

使用jimp

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

1. 安装 Jimp

通过 npm 命令安装 Jimp：

npm install jimp

2. 引入 Jimp

在代码中引入 Jimp 模块：

const Jimp = require('jimp');

3. 读取图片

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

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

4. 操作图片

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

// 调整大小
image.resize(200, 200)

// 裁剪
image.crop(10, 10, 100, 100)

// 旋转
image.rotate(45)

// 缩放
image.scale(0.5)

// 滤镜
image.greyscale().blur(5)

5. 保存图片

使用 Jimp.write() 方法保存图片：

image.write('path/to/new/image.png', (err) => {
  if (err) throw err;
  console.log('Image saved.');
});



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

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

使用webconvert

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

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

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

npm install -g webp-convert

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

npm install -g webp-convert

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

webpconvert example.png example.webp

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

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

webpconvert example.png example.webp -q 80

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

webpconvert example.png example.webp -r 50%

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

webpconvert example.png -o

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

使用Cropper.js

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

安装 Cropper.js

可以使用 npm 命令来安装 Cropper.js：

npm install cropperjs --save

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

const Cropper = require('cropperjs');

配置服务器

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

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

app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server started on port 3000.');
});

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

使用 Cropper.js

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

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

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.post('/crop', (req, res) => {
  const cropper = new Cropper(req.body.src, {
    aspectRatio: 1 / 1,
    crop(event) {
      console.log(event.detail.x);
      console.log(event.detail.y);
      console.log(event.detail.width);
      console.log(event.detail.height);
    },
  });

  cropper.getCroppedCanvas().toBlob((blob) => {
    res.send(blob);
  });
});

app.listen(3000, () => {
  console.log('Server started on port 3000.');
});

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

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

注意事项

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

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

代码007普通

打赏 收藏 海报 链接