阿凡佬 发表于 2023-5-6 17:35:29

关于前端图片压缩一个取巧的解决方案

乍一看这个标题,格友们肯定觉得很困惑,图片单元格不是自带压缩的么?为啥会有人想要重新造轮子啊


起因是这样的,最近我在捣鼓一个图片管理的应用,用于管理我们的产品图片。

但这样简简单单的展示,后期图片一多,就肯定还要涉及到“分组”、“批量操作”、“快速下载”这些功能,于是必然的,我需要在图片上方浮动一些控件,例如标签、按钮、多选框等等。就像这样

这个时候我就自然而然的想到了用背景图片引用图片单元格。

但实际用起来却是这样的

这是咋回事呢?原来我们上传的图片动辄十几M,有些单反拍的原图更是二三十M,而背景图片会直接加载原图。这样下来带宽就算是三峡大坝都撑不住一个人的访问量。那么问题来了,怎么让背景图片加载缩略图呢?于是乎,就这个命题,在论坛里搜啊,上github找js库啊,甚至想搞服务器端的压缩命令啊,废了不少脑力。
然后今天跟David.Zhong聊了会儿天,提到了这篇帖子:
看完必恍然大悟的活字格内幕:五十五、活字格附件存储原理详解
https://gcdn.grapecity.com.cn/showtopic-143200-1-1.html
(出处: 葡萄城产品技术社区)

嘿!我突然灵光乍现,咱直接去取这张缩略图就好啦!
开搞开搞!

首先我们需要了解的一点,其实图片单元格的取值就是这个图片在服务器里的文件名,例如
6df67e94-73ad-45bc-a820-bba35b0bfd33_0f9cc726cffc1e17d9e3be795d90f603728de9cb.jpg
把图片单元格删掉,就是这样的

那是不是背景图片的取值也是按这个逻辑来的?那我就只用在这段文件名的末尾,加入.small,不就能让背景图片加载服务器自动生成缩略图啦
就像这样
6df67e94-73ad-45bc-a820-bba35b0bfd33_0f9cc726cffc1e17d9e3be795d90f603728de9cb.small.jpg
那接下来就是考验我Excel公式的时候了。但是现在,在ChatGPT的加持下,这么“简单”的公式,根本难不倒我,哈哈:itwn:


Ctrl+C, Ctrl+V , 稍微改一改,完成了,前后不到30秒
=IFERROR(LEFT(B2,FIND(".",B2)-1)&".small."&RIGHT(B2,LEN(B2)-FIND(".",B2)),B2)


OK,运行!


然后让我们来看下每张图片的大小

基本都在50kb以下,过关!:i0tw2:

页: [1]
查看完整版本: 关于前端图片压缩一个取巧的解决方案