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

这篇具有很好参考价值的文章主要介绍了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 及以下的浏览器。
 文章来源地址https://www.toymoban.com/news/detail-754524.html

到了这里,关于nodejs处理图片的几种方法,使用sharp,jimp,webconvert的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】富文本rich-text的图片预览效果的几种方法

    使用原生小程序开发,实现在富文本rich-text中的图片预览效果的几种方法对比。 update:因为方案3wxparser后续没有再维护,解析微信公众号文章时会出现排版错误的问题。作为插件也很难二次开发。换成 mp-html 了 一个不需要用额外组件或插件的方法: 思路 :使用正则把图片的

    2023年04月08日
    浏览(52)
  • C# 进行图像处理的几种方法(Bitmap,BitmapData,IntPtr)

    在C#中,进行图像处理时主要会使用到  System.Drawing  命名空间中的几个关键类,其中Bitmap、BitmapData和IntPtr是进行高效像素操作的重要工具。以下是如何利用这些类进行图像处理的方法概述: Bitmap 类 : System.Drawing.Bitmap  是一个封装了位图数据的类,它允许你加载、保存、显示

    2024年02月02日
    浏览(51)
  • NodeJs - for循环的几种遍历方式

    我们先来看下 for 循环的4种不同遍历方式: 接下来就从几个不同的方面来说下这四种打印方式的区别。 遍历的目标: 普通的 for 循环:每层遍历需要 通过下标来获取 数组元素。 forEach :每层遍历可以 直接拿到数组元素的值以及对应的下标 。 for-in :每层遍历需要 根据数组

    2024年02月09日
    浏览(49)
  • Python安装库的几种方法(使用Pycharm几种方法)

    1.我的Pycharm已经改成中文格式了 首先在Pycharm中进行安装库 进入Python解释器中。 里面搜素需要的库,可能速度很慢,有的库没有,可以采用别的方法。 2. cmd安装库文件 Windows+R进入CMD命令下。 直接输入 pip install *** 就可以了 就是自动安装需要的库。 3.直接使用别人已经安装好

    2024年02月13日
    浏览(45)
  • Vue中使用icon的几种方法

    目录 1. 使用第三方 UI 库 2. 使用矢量图标库 3. 自定义 icon 组件 4. 使用 CDN 5. 使用 CSS 图标库 在Vue中使用icon可以有多种方法,以下是其中的一些: 使用第三方 UI 库,如 ElementUI、Vuetify等,它们提供了一系列的组件和 icons 组件。 使用矢量图标库,如 Font Awesome、Material Design Ic

    2024年02月10日
    浏览(40)
  • Linux 查看内存使用情况的几种方法

    *以下内容为本人的学习笔记,如需要转载,请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/27UaVm5_FMhCnxB88pc0QA 在运行 Linux 系统的过程中为了让电脑或者服务器以最佳水平运行,常常需要监控内存统计信息。 那么今天我们就来看看有哪些方法可以访问所有相关信息

    2023年04月20日
    浏览(42)
  • 分享Linux 查看内存使用情况的几种方法

    Linux 查看内存使用情况的几种方法包括使用 free 命令、top 命令、htop 命令、vmstat 命令和/proc/meminfo 文件。这些方法可以帮助用户了解系统内存的使用情况,包括总内存、已用内存、空闲内存、缓存和交换分区等信息。 在运行 Linux 系统的过程中为了让电脑或者服务器以最

    2024年02月04日
    浏览(50)
  • 使用html网页播放多个视频的几种方法

            因为项目测试需要,我需要可以快速知道自己推流的多路视频流质量,于是我想到可以使用html网页来播放视频,实现效果极其简单,方法有好几种,以下是几种记录:         注意 :测试过,VLC需要使用360急速浏览器,于是以下都是基于360急速浏览器测试的: vi

    2024年04月28日
    浏览(42)
  • 使用JavaScript关闭浏览器窗口的几种方法

    在Web开发中,有时候我们需要通过JavaScript来控制用户的浏览器行为,其中之一就是关闭浏览器窗口。本文将介绍几种使用JavaScript关闭浏览器窗口的方法,并提供相应的源代码示例。 使用window.close方法关闭窗口 要关闭当前窗口,可以使用window.close方法。这个方法会关闭当前浏

    2024年02月04日
    浏览(72)
  • 使用python判断字母大小写的几种方法

    使用Python中的内置函数 isupper() 和 islower() 来判断一个字母是否为大写或小写字母。 用户输入一个字母,程序使用isupper()和islower()函数判断字母是否为大写或小写,并输出相应的信息。如果用户输入了除字母以外的字符,程序会输出一个错误信息。 使用ASCII码值来判断字母大

    2024年02月04日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包