纯前端实现超大图片超快稳定压缩

1 分钟
图片压缩

背景

先给大家看一下压缩效果,是不是非常好,下面看看如何实现吧!

在最近开发中,因为我们的网站用户可能上传很大的图片,那如果直接提示用户上传失败,或者禁止上传大图,可能对用户不太友好,用户还需要去压缩图片然后再回来上传,增加了用户使用系统难度,于是就想让后端同学在服务端进行图片压缩,但是后端同学说压缩图片很消耗系统资源,不如使用第三方付费服务,我就想能不能在客户端实现图片压缩呢?毕竟客户端压缩有很多优势呢!

客户端压缩为什么比服务端压缩更有优势?

1 ) 减轻服务器负担:压缩服务在客户端实现,这样能大大减少我们服务器的压力,毕竟用户的资源消耗不要钱,我们服务器都是真金白银

2)提升用户体验:我们不需要把很大的资源上传到服务器,而是传给服务器一个很小的资源,对于网络差的用户非常友好

3)实时查看压缩效果:如果有需要看压缩效果的场景,客户端压缩用户很快能看到压缩效果,但是服务端就需要先把大资源发送到服务端,然后再进行压缩处理返回小资源,然后客户端才展示,用户可能都睡着了。。

实现

不知要大家平时是否有压缩图片的需求,大家会使用什么呢?我可以推荐两个在线压缩图片服务,非常好用:

那第二个是谷歌开源的压缩服务,是在客户端实现,都是在本地操作,安全快捷,接下来我的实现也是依赖于它。

谷歌的开源代码是:https://github.com/GoogleChromeLabs/squoosh

有大神进行了封装,让我们可以在前端很方便使用:https://github.com/ElonXun/squoosh-compress

然后,我们就安装这个包,然后按照文档进行压缩即可,我这里写了一个使用的示例代码,可供大家参考:

https://github.com/chaseFunny/image-compression

END

不知道大家是否有更好的图片压缩实现方式,大家觉得图片压缩在客户端还是服务器实现更好点呢?


此文自动发布于:github issues