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 及以下的浏览器。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/123143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习中Transformer的简单理解

Transformer 网络结构 Transformer也是由编码器和解码器组成的。 每一层Encoder编码器都由很多层构成的,编码器内又是self-attention和前馈网络构成的。Self-attention是用来做加权平均,前馈网络用来组合。 但是decoder有点不同,多了一层En…

从0到1之微信小程序快速入门(基础知识)

目录 JSON 配置文件 WXML 模板 WXSS 样式 JS 逻辑交互 微信小程序中,每个页面由4 个基本文件组成,它们分别是:js文件(页面的脚本文件,存放页面的数据、事件处理函数等)、json文件(当前页面的配置文件,配置窗口的外…

html2pdf

页面布局时将需要保存在同一页pdf的dom元素用div包裹,并为该div添加class类名,例如.convertPDF,如果有多页创建多个.convertPDF这个div,再循环保存pdf即可 用到了html2canvas和JsPdf这两个插件,自行站内搜索安装

两个Tomcat插件配置不同端口,session冲突,同时登录被挤下线问题的解决

如果是配置了两个Tomcat的插件&#xff0c;在同一ip有两个需要同时登录的项目&#xff0c;可以在其中一个web项目的web.xml文件里添加session命名的配置&#xff0c;如下&#xff1a; <!--配置不同的session&#xff0c;避免管理端和手机端两个同时登录被挤下线--><se…

Redis的瓶颈在哪里?

Redis是一个开源的非常快速且高效的内存键值存储数据库&#xff0c;常用作缓存、消息队列、会话存储等。 Redis之所以被认为是一个快速的数据库&#xff0c;主要是由于以下几个方面的设计和实现&#xff1a; 基于内存存储&#xff1a; Redis是一个基于内存存储的数据库&#x…

磁盘管理(初始化,引导块,坏块管理,固态硬盘)

目录 1.磁盘初始化2.引导块3.坏块的管理1.坏块检查2.坏块链表3.扇区备用 4.固态硬盘&#xff08;SSD&#xff09;1.原理2.组成3.读写性能特性4.与机械硬盘相比5.磨损均衡技术 1.磁盘初始化 ①进行低级格式化&#xff08;物理格式化&#xff09;&#xff0c;将磁盘的各个磁道划分…

openEuler 22.03 x86架构下docker运行arm等架构的容器——筑梦之路

为什么要这样做&#xff1f; 随着国产化的普及&#xff0c;国家政策对信创产业的支持&#xff0c;尤其一些金融证券行业、政府单位等&#xff0c;逐渐开始走国产化信创的路线&#xff0c;越来越多接触到国产 CPU &#xff08;arm 平台&#xff0c;比如华为的鲲鹏处理器&#xf…

koa搭建服务器(二)

在上一篇文章已经成功的运行了一个http服务器&#xff0c;接下来就是使用Sequelize ORM&#xff08;官方文档&#xff1a;Sequelize 简介 | Sequelize中文文档 | Sequelize中文网&#xff09;来操作数据库。 1、安装依赖 首先也是需要安装相关的依赖 npm i sequelize npm i …

MySQL面试题

面试题一 1、创建一个数据库 create database db_one; 2、 创建四张表 create table student( s_id int(10) not null comment 学号 primary key, s_name varchar(20) not null comment 姓名, s_birth year comment 生日, s_sex varchar(4) default "女" comment 性…

【PointNet—论文笔记分享】

第一个直接基于原始点云数据进行分割、分类的模型&#xff0c;之前都是基于多视图或者体素的方式。 论文: PointNet: Deep Learning on Point Sets for 3D Classification and Segmentation代码: TensorFlow版 Pytorch版 基本模型架构&#xff1a; 分别对每个点进行特征提取…

微信小程序vue+uniapp旅游景点门票预订系统 名胜风景推荐系统

与此同时越来越多的旅游公司建立了自己的基于微信小程序的名胜风景推荐平台&#xff0c;管理员通过网站可以添加用户、景点分类、景点信息、在线预订、最新推荐&#xff0c;用户可以对景点信息进行在线预订&#xff0c;以及开展电子商务等。互联网的世界里蕴藏无限生机&#xf…

redis6.0源码分析:简单动态字符串sds

文章目录 sds简介与特性(面试)sds结构模型数据结构苛刻的数据优化数据结构优化uintX_t对齐填充 sds优势O(1)时间复杂度获取字符串长度二进制安全杜绝缓冲区溢出自动扩容机制——sdsMakeRoomFor方法 内存重分配次数优化 sds最长是多少部分API源码解读创建sds释放sds sds简介与特…

github中.gitignore不起作用啦

文章目录 前言两种方法解决清除本地缓存设置不需要 额外注意 前言 提示&#xff1a;人不是靠讲话来生活。每个人都应该靠行动。而行动&#xff0c;是需要时间来证明的。 --《自在独行》 两种方法解决 清除本地缓存 (.gitignore中已经表标明忽略的文件目录下的文件了&#xf…

Ubuntu 22.04自动登录进入桌面

1.编辑gdm3配置文件 sudo vim /etc/gdm3/custom.conf 2.修改内容为 AutomaticLoginEnableTrue AutomaticLoginusername 3.查看和重启服务 # 查看服务状态 systemctl --user status gnome-remote-desktop.service # 重启服务 systemctl --user restart gnome-remote-deskt…

如何从Android手机上轻松恢复误删除的短信 ?

当您使用 Android 手机时&#xff0c;您可能会误删除一些 Android 短信。如果这些消息对您很重要&#xff0c;您可能想要恢复它们。在这种情况下&#xff0c;您可以尝试使用U1tData安卓数据恢复&#xff08;奇客软件&#xff09; 来完成这项工作。这篇文章将向您展示更多信息。…

MinIO安装

Minio是一个开源的分布式对象存储服务器&#xff0c;它兼容Amazon S3服务接口。它可以用于构建私有云存储&#xff0c;为应用程序提供可扩展的对象存储功能。 安装 docker安装 docker run -d -p 9000:9000 -p 50000:50000 --name minio \ -e "MINIO_ROOT_USERadminpili…

Springmvc 讲解(1)

文章目录 前言一、SpringMvc1、简介2、核心组件和调用流程2.1 涉及组件的理解 3、小案例快速体验3.1场景需求3.1.1 导入依赖3.1.2 controller声明3.1.3 核心配置类3.1.4 环境搭建3.1.6 配置tomcat3.1.7 测试 二、SpringMvc 接收参数1.路径设置注解2、param接收参数四种类型2.1 …

AD教程(一)工程组成及创建

AD教程&#xff08;一&#xff09;工程组成及创建 工程组成 原理图库 绘制电阻模型、芯片模型、电容模型等&#xff0c;即将元件模型绘制出来。 原理图 将绘制的原件模型放置到原理图中&#xff0c;然后再添加连接的导线、网络标号。器件和器件之间的连接关系&#xff0c;在原…

单片机中的 _nop_() 延时以及其相关的基础扩展

使用 _nop_() 函数做延时遇到的一些问题 以及对此延伸出的一些需要了解的基本概念 ...... by 矜辰所致 完善文章内容结构&#xff0c;补充指令周期、机器周期等一些基本概念 2023/10/25前言 最近还是继续做着项目&#xff0c;因为在某 8051 内核芯片上使用到了 I…

MySQL篇---第四篇

系列文章目录 文章目录 系列文章目录一、并发事务带来哪些问题?二、事务隔离级别有哪些?MySQL的默认隔离级别是?三、大表如何优化?一、并发事务带来哪些问题? 在典型的应用程序中,多个事务并发运行,经常会操作相同的数据来完成各自的任务(多个用户对 同一数据进行操作…