使用Node.js怎么压缩图片?方法介绍


本文摘自PHP中文网,作者青灯夜游,侵删。

使用Node.js怎么压缩图片?下面本篇文章给大家介绍一下使用Node.js实现图片压缩的方法,一起来看看吧!

一、内容简介

前段时间开发了上传图片到七牛的Vscode插件,当时还差了一个功能:图片压缩,这次也终于解决了;同时还解决了一个遗留bug(链接内有空格编辑器会卡住),现在已经可以算是一个有完整功能的插件了,感兴趣的小伙伴可以在Vscode中搜索插件upload-to-qiniu进行安装。

【推荐学习:《nodejs 教程》】

效果预览:

1.gif

二、node压缩图片

一开始是打算用TinyPNG的API实现图片压缩,但是尝试过后发现压缩速度特别慢,而且好像还要花钱,果断就放弃了。改为使用imagemin。

这里是有一个坑的: 由于imagemin不可以直接压缩图片,而是需要依赖imagemin-jpegtranimagemin-pngquant,但是在安装imagemin-pngquant时会安装不了,找到了一个原因是说这个库是基于一些底层语言实现,所以不能直接安装,需要在电脑上安装另一个依赖libpng

安装libpng

直接贴一个安装brew的地址:zhuanlan.zhihu.com/p/90508170,只要对着他说的敲命令基本上就可以安装brew啦。最后我们再执行brew install libpng,等到libpng安装成功后,到项目中安装imagemin-pngquant就可以安装上了。

代码实现压缩图片根据需求我们肯定不希望他将图片压缩后放在文件夹里,而是需要在代码中直接获取到压缩后的内容,直接上传到七牛。那么就要用imagemin.buffer,这个方法通过接收一个buffer对象,经过压缩后再返回一个buffer,我们只要用压缩后的buffer直接上传到七牛,思路就是这样,下面是代码实现:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

// 获取buffer

export const getBufferFromFile = (filePath: string): Promise<Buffer> => {

  return new Promise((resolve, reject) => {

    fs.readFile(filePath, function (err: any, res: any) {

      if (!err) {

        resolve(res)

      }

    })

  })

}

 

 

// 压缩图片,传入图片文件路径,通过getBufferFromFile方法转为buffer 后进行压缩

const imageGzip = async (loaclFile: string): Promise<any> => {

  const bufferFile = await getBufferFromFile(loaclFile)

  let res

  try {

    res = await imagemin.buffer(bufferFile, {

      plugins: [

        imageminJpegtran(),

        imageminPngquant({

          quality: [0.6, 0.8],

        }),

      ],

    })

  } catch (err) {

    console.log('error', err)

    res = null

  }

  return res

}

这样我们就可以很容易的实现了,图片压缩,现在我们再改写一下上传到七牛:因为之前没有压缩我们可以直接传文件路径上传七牛,压缩后我们只有buffer了,需要上传buffer到七牛:

阅读剩余部分

相关阅读 >>

node.js和java后台服务器的简单比较

使用docker高效部署node.js应用的方法介绍

浅谈node.js中es6导入语法的使用方法

了解node.js中的模块系统

深入了解node.js和electron是如何做进程通信的

cors跨域资源共享详细介绍(附代码)

node.js中什么是buffer对象?使用场景是什么

node.js为什么总用mongo

一文快速了解node.js中的事件循环

一起看看nodejs中的cookie和session

更多相关阅读请进入《node.js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...