ToB企服应用市场:ToB评测及商务社交产业平台

标题: nodejs处理图片的几种方法,使用sharp，jimp，webconvert [打印本页]
作者: 王海鱼    时间: 2024-6-8 22:24
标题: nodejs处理图片的几种方法,使用sharp，jimp，webconvert
使用sharp

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

安装Sharp库可以使用npm下令：
  1. npm install sharp
复制代码
2. 调用Sharp库

在代码中调用Sharp库，可以先引入Sharp库：
  1. const sharp = require('sharp');
复制代码
3. 图片格式转换

利用Sharp库，可以将图片格式转换为其它格式，例如将JPEG图片转换为PNG图片：
  1. sharp('input.jpg')
  2.   .toFormat('png')
  3.   .toFile('output.png', (err, info) => {
  4.    // 处理错误或完成后的回调函数
  5. });
复制代码
4. 尺寸调整

利用Sharp库，可以调整图片的尺寸，例如将图片宽度调整为800像素：
  1. sharp('input.png')
  2.   .resize(800, null)
  3.   .toFile('output.png', (err, info) => {
  4.     // 处理错误或完成后的回调函数
  5.   });
复制代码
5. 压缩

利用Sharp库，可以压缩图片文件巨细，例如将图片文件压缩为50%：
  1. sharp('input.png')
  2.   .jpeg({ quality: 50 })
  3.   .toFile('output.png', (err, info) => {
  4.     // 处理错误或完成后的回调函数
  5.   });
复制代码
6. 裁剪

利用Sharp库，可以裁剪图片，例如将图片裁剪为400x400像素：
  1. sharp('input.png')
  2.   .resize(800, 800)
  3.   .extract({ width: 400, height: 400, left: 200, top: 200 })
  4.   .toFile('output.png', (err, info) => {
  5.     // 处理错误或完成后的回调函数
  6.   });
复制代码
7. 旋转

利用Sharp库，可以旋转图片，例如将图片逆时针旋转90度：
  1. sharp('input.png')
  2.   .rotate(-90)
  3.   .toFile('output.png', (err, info) => {
  4.     // 处理错误或完成后的回调函数
  5.   });
复制代码
8. 添加水印

利用Sharp库，可以在图片上添加水印，例如将文字“Hello World”添加到图片左上角：
  1. sharp('input.png')
  2.   .resize(800, null)
  3.   .overlayWith(Buffer.from('Hello World'), { gravity: 'northwest' })
  4.   .toFile('output.png', (err, info) => {
  5.     // 处理错误或完成后的回调函数
  6.   });
复制代码
以上是使用Sharp库的根本步调，具体使用可以根据具体需求进行调整。

使用jimp

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

通过 npm 下令安装 Jimp：
  1. npm install jimp
复制代码
2. 引入 Jimp

在代码中引入 Jimp 模块：
  1. const Jimp = require('jimp');
复制代码
3. 读取图片

使用 Jimp.read() 方法读取图片，并在回调函数中处理图片：
  1. Jimp.read('path/to/image.png', (err, image) => {
  2.   if (err) throw err;
  3.   // 对图片进行操作
  4. });
复制代码
4. 操作图片

Jimp 支持多种操作，比如调整巨细、裁剪、旋转、缩放、滤镜等等。以下是一些常见的操作示例：
  1. // 调整大小
  2. image.resize(200, 200)
  4. // 裁剪
  5. image.crop(10, 10, 100, 100)
  7. // 旋转
  8. image.rotate(45)
  10. // 缩放
  11. image.scale(0.5)
  13. // 滤镜
  14. image.greyscale().blur(5)
复制代码
5. 保存图片

使用 Jimp.write() 方法保存图片：
  1. image.write('path/to/new/image.png', (err) => {  if (err) throw err;  console.log('Image saved.');});####完整代码示例const Jimp = require('jimp');
  2. 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：

  1. npm install -g webp-convert
复制代码
3. 转换一张图片格式为 WebP 格式的下令行语法如下：

  1. npm install -g webp-convert
复制代码
例如，在当前目次下有一张名为 "example.png" 的 PNG 图片，将它转换为 WebP 格式并输出到 "example.webp"，可以使用以下下令：
  1. webpconvert example.png example.webp
复制代码
4. 根据必要，可以添加一些选项来调整转换的质量和巨细，例如：

- 调整输出图片质量等级：使用 "-q" 或 "--quality" 选项，并指定一个介于 0 到 100 之间的数字。
  1. webpconvert example.png example.webp -q 80
复制代码
- 调整输出图片巨细：使用 "-r" 或 "--resize" 选项，并指定一个百分比或像素值。
  1. webpconvert example.png example.webp -r 50%
复制代码
- 转换图片并自动替换原文件（需使用 "-o" 或 "--overwrite" 选项）。
  1. 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：
  1. npm install cropperjs --save
复制代码
安装完成后，就可以在项目中引入 Cropper.js 了：
  1. const Cropper = require('cropperjs');
复制代码
配置服务器
为了在 Node.js 中使用 Cropper.js，必要配置服务器，让服务器能够访问图片文件。可以使用 express 框架来创建服务器：
  1. const express = require('express');
  2. const app = express();
  4. app.use(express.static('public'));
  6. app.listen(3000, () => {
  7.   console.log('Server started on port 3000.');
  8. });
复制代码
上面的代码创建了一个名为 app 的 express 应用，将项目根目次中的 public 文件夹设置为静态文件夹，用于存放图片文件。服务器启动后，可以在浏览器中访问 ```http://localhost:3000``` 查察是否配置成功。
使用 Cropper.js
下面是使用 Cropper.js 对图片进行裁剪的示例代码：
  1. const express = require('express');
  2. const app = express();
  3. const path = require('path');
  5. app.use(express.static('public'));
  7. app.get('/', (req, res) => {
  8.   res.sendFile(path.join(__dirname, 'index.html'));
  9. });
  11. app.post('/crop', (req, res) => {
  12.   const cropper = new Cropper(req.body.src, {
  13.     aspectRatio: 1 / 1,
  14.     crop(event) {
  15.       console.log(event.detail.x);
  16.       console.log(event.detail.y);
  17.       console.log(event.detail.width);
  18.       console.log(event.detail.height);
  19.     },
  20.   });
  22.   cropper.getCroppedCanvas().toBlob((blob) => {
  23.     res.send(blob);
  24.   });
  25. });
  27. app.listen(3000, () => {
  28.   console.log('Server started on port 3000.');
  29. });
复制代码
这段代码创建了一个名为 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 及以下的浏览器。
 










免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4