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 及以下的浏览器。
总结
到此这篇关于nodejs处理图片的几种方法的文章就介绍到这了,更多相关nodejs处理图片方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要记录一些 Node.js 应用中的小知识点，如果你 Google/Baidu “Node.js 如何判断文件是否存在” 发现给出的很多答案还是使用的 fs.exists，这里不推荐使用 fs.exists 你可以选择 fs.stat 或 fs.access。2020-08-08
本文主要介绍了node连接redis的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
在JavaScript生态系统中，你可以使用BigInt来处理大整数，但是，你也可以使用具有类似于BigInt功能的第三方库，本文将是使用BigInt和提供类似功能的流行库管理大数的完整指南，我们还将比较第三方库的用例、优势和劣势2023-06-06
这篇文章主要介绍了node.js中的fs.symlink方法使用说明,本文介绍了fs.symlink的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了nodejs中使用archive压缩文件的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家介绍了Node Sass依赖问题排查思路解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
在 node 中使用 koa-multer 库上传文件的方式详解
本文主要介绍了上传单个文件、多个文件,文件数量大小限制、限制文件上传类型和对上传的图片进行不同大小的裁剪,对node使用 koa-multer 库上传文件相关知识感兴趣的朋友一起看看吧2024-01-01
很多人都在问到底该用Koa还是express，所以下面这篇文章就来给大家再次的对比了关于express与koa的相关资料，通过对比大家可以更好的进行选择，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
node.js连接mongoDB数据库 快速搭建自己的web服务
这篇文章主要为大家详细介绍了node.js连接mongoDB数据库，如何快速搭建自己的web服务，感兴趣的小伙伴们可以参考一下2016-04-04
node.js中的http.response.addTrailers方法使用说明
这篇文章主要介绍了node.js中的http.response.addTrailers方法使用说明,本文介绍了http.response.addTrailers的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
最新评论