type
status
title
summary
slug
Created
Apr 6, 2024 10:17 AM
category
tags
Date
icon
password
一、背景
之前很早的时候搞了一个博客，但是一直没去打理它，最近放了一些文章上去，但是在配图体积方面有点问题，因为平常写公众号的时候会自动对图片做压缩，但是自己的博客没有。如果图片没做压缩，势必会影响访问速度，造成体验不佳。
我一般使用
tinyjpg 进行压缩，有时候为了体积进一步减小，还会转成 webp 的格式。
但是图片数量一多手动上传就比较麻烦，所以就想着开发一个小工具提高下效率。
二、技术选型
在压缩方面，本来是想在
Github上找找压缩库，后面发现其实 tinyjpg 开放了免费的API，每个月有500次，想一想也够自己使用了，所以选了这个。我希望这个工具有UI，操作起来比较方便，而Python的GUI库中
Gradio相对而言比较好看，所以最终的技术栈就是：Python + tinify + Gradio三、项目实战
整个项目开发下来，比较难的在于使用
Gradio 绘制画面，因为之前并没接触过 Gradio ，需要一定的上手成本我一开始设计的第一版是这样，但是这样设计有点问题，点击压缩按钮后，虽然成功压缩了图片，但界面上却没有地方展示输出的结果，导致不知道什么时候图片已经压缩成功。
随后第二版设计成这样，右边的输入框就是用来输出结果
这是界面的核心代码，主要是利用
Interface 实现了左边输入+右边输出的整体效果。
这里需要注意的是，
inputs传入多少个组件，对应的执行函数 fn 就得有多少个参数
另外就是只用
Image组件只能实现单张图片上传的效果，所以为了实现选择多张图片的效果，采用的是 File+UploadButton 的组合形式随后就是
tinify 的压缩代码
还有
webp 的转换代码，这里使用的是Python的 Pillow 库
四、注意事项
1、不同系统需要选择不同的
requirements.txt由于
tinify 依赖 requests库，而 requests 依赖 urllib3 库，在Mac上，如果 urllib3 的版本是 v2，极有可能会出现下面的问题，这时候使用 requirements_mac.txt 安装依赖即可
2、批量上传只能把图片都放在同一个文件夹下
由于
Gradio的文件多选，并不支持在多个目录下批量选择文件，所以目前使用的话只能把图片都放在同一个文件夹下，这里才能实现批量上传，而且注意批量上传需要点击 Upload Multi Image 按钮3、源码获取
关于源代码的获取，在公众号回复“图片压缩”就可以得到全部源码！
最后如果这个工具能帮到你的话，还请多多点赞，你的点赞是我不断更新的动力！
- 作者:AI技术巫
- 链接:https://ilovetech.cn/article/tiny_gradio
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
