前端如何实现「一键压缩图片」的小工具

564 阅读2分钟

背景

总所周知,前端项目里面经常需要使用各种图片;但是ui给的图片都非常大,所以我们在使用之前需要压缩一下; 基本上都是使用网站tiny-png来实现,然后再下载,然后再拖到某个文件夹下面去;

但是这里有一个问题,就是每次都得反复的操作文件来将图片从一个目录移到另一个目录,非常的不方便,所以就萌生了一个想法,我能不能实现一个小工具,一条命令直接图片压缩并移到指定目录呢;

于是,就有个这个项目。 github:compress-pngs

欢迎大家一起来完善这个小工具啊~,要是能给个star就更好了!

下面讲一下详细的实现步骤

项目准备,tinify库

在查找合适的图片压缩包时,我发现了tinify,即tiny-png官方给出的一个图片压缩包。这个是将图片传到tiny-png的服务器上,然后再将压缩后的图片返回给我们;

如何使用tinify

...
1 const tinify = require("tinify");
2 tinify.key = "467Kbym9jl55NmS54HcK54Cr5wCP"; // 这个是假的
3 tinify.fromBuffer().toBuffer()
...
  1. 第一行,就是一个包的引入,没什么问题;
  2. 第二行,是tiny-png官方给出的一个key密钥,因为本质上我们还是使用的他们的服务,所以需要在tiny-png官网注册,然后拿到一个密钥
  3. 第三行,就是一个图片压缩的核心代码

1⃣️点击这里登陆 image.png

2⃣️点这里生成一个key

image.png

实现思路

  1. 读文件,将所有的png格式图片读取出来。
  2. 通过tinify将图片压缩
  3. 将压缩的图片写入目标目录

所以,上面三个步骤我们可以看出,需要一个源目录将图片读出来,然后一个目标目录将图片写进去,这个通过minimist库来实现。

具体node实现命令工具的方法,可以参考我之前写的从0开始,用node实现一个命令行工具

总结

代码我就不放出来了,思路大概就是这样。这个npm包已经传到了npmjs.com,大家感兴趣的话可以自行体验
名字是:compress-pngs