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

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


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

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

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

但实际用起来却是这样的

这是咋回事呢？原来我们上传的图片动辄十几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的加持下，这么“简单”的公式，根本难不倒我，哈哈


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


OK，运行！


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

基本都在50kb以下，过关！