为了能在chiphell上发大图，我写了一款图床软件
本帖最后由 relsoul 于 2023-6-18 15:53 编辑# 前言
萌新发的第一篇游记的时候发现chiphell只支持500kb的图片,但是我拍出来的图片基本上都是10M往上，并且懒得再用软件批量压缩了，常用的图片压缩软件不清楚最后压出来的尺寸是否会小于500kb，而且一个一个看太麻烦了，后面发现discuz（chiphell 论坛程序）支持网络图片，也正好我有一台闲置的服务器（每个月1T流量，不限带宽），那为啥不把闲置的服务器利用起来呢？
# 调研
免费图床/自建图床 已经不是什么新鲜事了 目前图床可以有多种选择
1. （阿里云/腾讯云/七牛云）Oss
2.自有服务器
3. 公开的存储仓库 如github（没错 他也可以用来做图床）
其中oss是按照存储和流量付费的，看了一下价格并不便宜，公开图床 如github的话网络访问也是一个问题，主要的还是上传的时候不支持压缩，对外输出的还是10M的原图....这个尺寸量多了肯定影响访问，于是结合前言 还是把闲置的服务器利用起来（国外服务器 每个月大概12美元）。
# 自有服务器
如果你有一台服务器你可以做很多很酷的事情，比如搭建一个私有图床，调研了一下目前自建图床的开源，已经有很多很优秀的产品了，基本上功能都是比较完善丰富的 还带web ui可以管理上传过的图片等等。
虽然但是.... 自己看了一下还是想有一款非常轻量级的上传程序，调研了一下 发现客户端有一款名为 `picgo`的神器程序
https://cdn.relsoul.com/public/uploads/soul/2023-06-17/676723ea-acd2-4497-8802-5a41e41d375e.png?f=webp
完全开源的https://github.com/Molunerfinn/PicGo
初步看了一下目前picgo已经支持阿里云等私有/公开图床了... 搜索插件搜了半天没找到自由主机 也就是 self-host的整套服务（包括客户端和服务端），于是打算自己写一款轻量级的图床服务
# minify-upload
说干就干，想起来几年前自己写过一个chrome插件版本的上传程序，不过由于之前后端的版本写的比较早，这次也趁机会重构一下。
预想写出来的图床服务应该要支持
1. 简单易用，能快速部署，不包含任何数据库服务
2. 支持压缩图片和转化图片格式
3. 支持已有的图片批量压缩
4. 能多一点配置项服务
5. docker一键构建部署
6. 兼容picgo和原有的chrome插件
画了一两天时间折腾折腾就出来了
# minify-upload 后端服务
https://github.com/Relsoul/minify-ts-node
基于nodejs+nest+typescript的船新版本，想要的功能都支持成功了。
[*]基于文件目录化的用户文件保存与查看
[*]文件大小等后端校验与过滤
[*] 支持user认证
[*] 文件上传与保存
[*] 静态服务器
[*] picgo插件支持
[*] 上传压缩/转换图片
[*] 读取图片支持调整宽高&输出格式
[*] 支持批量压缩/转码原有图片
# minify-upload 客户端服务
picgo已经开发的很不错了～ 站在巨人肩膀上会更加轻松，于是我开发了一款picgo的插件: https://github.com/Relsoul/minify-picgo-host
https://cdn.relsoul.com/public/uploads/soul/2023-06-16/38c5c5e8-9b4c-4a04-ae73-67e8dc894abd.png
并且兼容了之前自己开发的chrome插件:https://github.com/Relsoul/minify-upload-chrome-extension
https://cdn.relsoul.com/public/uploads/image-1542643868775.png?f=webp
# 上传完图片如何使用？
上传完图片后会得到一个url地址比如这个
https://cdn.relsoul.com/public/uploads/soul/2023-06-16/38c5c5e8-9b4c-4a04-ae73-67e8dc894abd.png
上面的这串地址是原图，原图是png格式的 一般来说质量比较好，尺寸比较大，那有没有一种格式能保证质量差不多的前提还能缩小尺寸呢？ 答案是有的 那就是谷歌推出的webp格式
摘录至维基百科
WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式。
WebP最初在2010年9月发布，其支持库于2018年4月发布1.0版本。截至2021年5月，已有94%的浏览器支持此格式。
WebP的设计目标是在减少文件大小的同时，达到和JPEG、PNG、GIF格式相同的图片质量，并希望借此能够减少图片档在网络上的发送时间。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小。
WebP支持的像素最大数量是16383x16383。有损压缩的WebP仅支持8-bit的YUV 4:2:0格式。而无损压缩（可逆压缩）的WebP支持VP8L编码与8-bit之RGBA色彩空间。而无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释资料。
WebP有静态与动态两种模式。动态WebP（Animated WebP）支持有损与无损压缩、ICC色彩配置、XMP诠释资料、Alpha透明通道。
那么浏览器/设备的兼容性如何呢？
https://cdn.relsoul.com/public/uploads/soul/2023-06-17/b3839bb7-78c7-4ec3-add9-23fc23333c88.png
从上图可以看出大部分现代浏览器和设备都已经支持了，如果不考虑古早设备的话，可以放心大胆的用起来了。
# webp实际效果如何？
拿一张尺寸比较大的图片为例吧
https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg
https://cdn.relsoul.com/public/uploads/soul/2023-06-17/ebde4999-fecb-4415-84ff-25fa74797872.png
可以看到原图的大小为4000x2999，尺寸为2.2MB，那么转为webp格式后的尺寸是多少呢？
https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg?f=webp
复制上面的代码浏览器打开即是webp格式
https://cdn.relsoul.com/public/uploads/soul/2023-06-17/8a5b136e-5054-40bc-9640-44d375b16598.png
转化为webp后，尺寸减少了500kb 也就是22%的压缩率。质量的话可以对比两个图片均无太大区别。
# minify的格式转化支持
https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg?f=webp
可以看到通过minify的服务在图片的路径后面加了一个`?f=webp`，这个的意思就是转化当前图片为webp格式，那么当然也可以`?f=png`,`?f=jpeg`的形式
# minify的尺寸转化支持
https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg?f=webp
还是以上图为例，某些场景下并不需要那么大的一个尺寸输出，通过minify可以快速的等比调整图片尺寸
https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg?f=webp&w=1920
通过添加`w=1920`即可实现图片转化操作，在不指定高度的前提会自动进行高度适应裁剪。那么同理 通过添加`h=600` 会自动根据高度裁剪
https://cdn.relsoul.com/public/uploads/soul/2023-06-17/084b2c2e-d5b8-45a3-8049-da8595a9c8ed.png?f=webp&h=600
# 难道没有缺点么？
有，并且不止一个，阿里云等云服务商的oss服务也提供了上述的尺寸转化支持，只不过需要付费，并且云厂商提供的转化效率更高，并且还有缓存技术，minify依赖于本身服务器的算力，上述用的服务器配置为1核，2g内存，目前来看压力负债还好。
通过cloudflare提供的cdn及缓存加速服务，重复的图片实际上流量并没有打到实际服务器上。
本文仅供有一定动手能力，自有服务器的玩家进行尝试，毕竟代替方案还是挺多的。
看到这里不点个赞咩？
本帖最后由 xsdianeht 于 2023-6-18 16:02 编辑
可以上avif把，现在浏览器和系统都支持了
https://www.bilibili.com/read/cv22543150 xsdianeht 发表于 2023-6-18 16:00
可以上avif把，现在浏览器和系统都支持了
https://www.bilibili.com/read/cv22543150
底层框架也是支持的，只是在format的allow格式没有开放出来，配置一下json就👌了
ref： https://sharp.pixelplumbing.com/api-output#toformat xsdianeht 发表于 2023-6-18 16:00
可以上avif把，现在浏览器和系统都支持了
https://www.bilibili.com/read/cv22543150
avif的兼容性基本上还是有点新的
https://cdn.relsoul.com/public/uploads/soul/2023-06-18/7fcda91f-6fbc-47da-a846-a76ed4c7b739.png?f=webp relsoul 发表于 2023-6-18 16:03
底层框架也是支持的，只是在format的allow格式没有开放出来，配置一下json就👌了
ref： https://sharp.p ...
[可爱]感谢，picgo的压缩真不好用，经常抽风，还是服务器端压缩靠谱 我之前图都是传z4a上的，太累了，久而久之就不怎么带图发帖了 牛逼，虽然看不太懂，还是要支持下，另外我一直用的是https://imgse.com/ 本帖最后由 qy680ty 于 2023-6-18 16:28 编辑
支持一下！！
提供一个透明背景的本站logo，分辨率256x256
自取链接（⬅可点击）
如下图有水印，可点上面链接自取原图，否则右键保存即可
. CAVIF默认，1.24MB
http://imgbed1212.test.upcdn.net/CAVIF.avif
AVIFENC CQ36，616KB
http://imgbed1212.test.upcdn.net/CQ36.avif 我只希望这个贴能让轮子把签名档恢复回来。 6，楼主牛皮 我直接牛逼 牛啊！！！！！自己家里DDNS出来的服务器可以用吗？ endlessbest 发表于 2023-6-18 17:38
牛啊！！！！！自己家里DDNS出来的服务器可以用吗？
可以，本身监听的是本地10244的http 端口，通过nginx反向代理即可，等下周我把docker部署和nginx部署的文档再完善一下，后面部署就简单很多了 qy680ty 发表于 2023-6-18 16:26
支持一下！！
后面的版本我觉得可以加个上传水印功能 可以抱的萝卜 发表于 2023-6-18 16:16
牛逼，虽然看不太懂，还是要支持下，另外我一直用的是https://imgse.com/
对，公开的图床也是一种解决方案，有些公开的图床不会保存上传的文件太久，也有一些没办法输出原始图都会压缩一下，同时裁剪功能可能也是缺失的 xsdianeht 发表于 2023-6-18 16:58
CAVIF默认，1.24MB
http://imgbed1212.test.upcdn.net/CAVIF.avif
AVIFENC CQ36，616KB
这个压缩率可以 xsdianeht 发表于 2023-6-18 16:10
感谢，picgo的压缩真不好用，经常抽风，还是服务器端压缩靠谱
picgo本身也是一个浏览器，底层压缩也是js，实际上可以在插件中引用服务端的压缩工具，也可以实现上述的效果😃 lznb，挺不错的，学到了 最近也在准备重新学一下nestjs，一直在用expressjs，三年前用过一段时间nestjs，有点抽象，各种装饰器……有点不太好理解。后来大部分后端只用express，也就作罢了。 relsoul 发表于 2023-6-18 17:56
对，公开的图床也是一种解决方案，有些公开的图床不会保存上传的文件太久，也有一些没办法输出原始图都会 ...
可以私信下这个12美元是哪的服务器吗，给下运营商，谢谢了 战马 看不懂也支持一下 我一直用画图放缩，500kb的清晰度还是可以的 [生病]一直用的sm.ms，因为是之前买的终身高级会员 支持一下，我记得sharex可以添加自用图床 膜拜高手[可爱] litccc 发表于 2023-6-19 09:04
支持一下，我记得sharex可以添加自用图床
right，不过每个服务端的上传接口和定义都不一样，这个估计得额外处理 bigeblis 发表于 2023-6-19 07:54
门槛好高！闲置服务器这玩意一般人没有吧？
哈哈，这倒是，我的这台吃灰太久了，每个月流量都剩下900多G，正好图床利用起来
页:
[1]
2