用纯前端实现一个图片压缩工具

1,210 阅读2分钟

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金

大家好,我是山月。

新站发布,按照惯例,先上链接: devtool.tech/tiny-image

微图

我把这个应用命名为微图,即将图片体积变小的意思。网站置于我的小工具集合中 devtool.tech/tiny-image

支持 JPEG、PNG、WebP 等图片格式,不限图片尺寸,也不限图片大小,并可批量下载为压缩包。

要知道,仅仅不限尺寸不限大小已经超出大部分线上图片压缩工具,且还没有广告。况且,有任何意见,可添加山月好友直接提出。

还有一个要点是纯浏览器端压缩,不在服务器存储,因此速度较快,且无安全性问题。比如山月,就不太愿意使用一些线上工具压缩个人身份证图片之类。

使用 wasm 结合 mozjpeg/oxipng 等进行图片编码,因此有较高的性能与压缩算法支持。这也是该工具之所以能跑在浏览器压缩图片的原因。

初衷

该工具初衷用于减小图片体积,从而提升网站性能。

在两年前,就有意做一个图片压缩工具,有两种方案,考虑到其中问题,一直搁浅。

  • 浏览器端实现: canvas。性能太差,Pass。
  • 服务器端实现: 有两种思路。
    • 借助于 sharp 等工具自建服务器实现。需要做好存储、限流、日志之类同时兼顾服务器压力过大,且网站未备案,Pass (主要是觉得麻烦)
    • 借助于 OSS 的图片处理功能实现。付费,且易被盗用,Pass

最近开始学习 wasm,终于有一个性能与便宜兼顾的方案,于是用了两天做了一个粗糙的版本。

新功能实现

目前主体功能已实现,我也是高频用户,但仍有不足,陈列以下,将逐步实现。

  1. 图片可设置缩放比例。大部分时候图片并需要这么大。
  2. 图片可压缩前后预览。预览后可直接通过右键复制图片,无需下载。
  3. 图片可设置转为 webp。webp 体积更小。
  4. 目前 wasm 压缩时仍在主线程,图片过多可能造成卡顿

下一个工具

上一个工具是用来查看 EXIF 信息的预览器。虽然发布以来用的人不多 (其实我自己用的也不多)。这得出一个道理,只有自己用的多的工具,才能有源源不断的动力去持续改进,否则会被弃坑。

这次的工具是图片压缩。

前两次都是图片相关,那下次做个什么呢?