[经验] 用轻量服务器搭建imgproxy来获取不同尺寸的图片

moe

3年前

本帖最后由 lixiaofei 于 2021-11-27 15:22 编辑

刚才看到论坛里有人问chevereto能不能和oss/cos一样用?width=&height=传参获得不同大小，虽然我不知道chevereto是不是支持，但是我原来用过一个imgproxy可以实现这样的效果。

在上传了一张图片以后，在不同的页面下，会要求显示不同的分辨率。常见的在图片列表页面显示的64*64的小缩略图，在瀑布流模式下显示的中型尺寸图片，以及原图模式下显示的完全尺寸的原图。除此之外，我们也可能会想对图片进行压缩来节省流量，比如上传的png图片，但是显示的时候来显示jpeg图片来加快用户的访问速度。针对这些需求，我用的是imgproxy这个图片代理软件，官方网站是https://imgproxy.net/。

通过名字就知道，这是一个图片代理服务，简单的来说，这个软件会反代真正的图片地址，当请求图片的时候，请求的是imgproxy的图片地址，然后imgproxy再去请求原始图片，将其转换为要求的尺寸和格式以后，再发送给用户。除了这些以外，imgproxy还可以对原始图片进行模糊化、旋转、亮度调节、加水印等很多功能，具体可以去看官方的文档说明。

官方也给了一个其工作的原理图。从下图中可以看出，可以在imgproxy前面再配一层CDN来缓存已经处理好的图片。

话不多说，下面开始教程，有需要的小伙伴可以跟着部署一下。

购买服务器

如果没有服务器的话，需要先购买一台腾讯云的轻量服务器。

轻量应用服务器（TencentCloud Lighthouse）是新一代开箱即用、面向轻量应用场景的云服务器产品，助力中小企业和开发者便捷高效的在云端构建网站、小程序/小游戏、电商、云盘/图床以及各类开发测试和学习环境，相比普通云服务器更加简单易用，提供高带宽流量包并以套餐形式整体售卖基础云资源，将热门开源软件融合打包实现一键构建应用，是您使用腾讯云的最佳入门途径。为了方便安装应用，我们需要准备Docker环境。

腾讯云经常举办各种活动，可以进入他们的活动页面进行购买，可以选择距离最近的区域购买，不过不想北岸的话，可以选择境外的服务器(比如香港区域)进行购买。镜像的话，选择【官方镜像】下的【docker基础镜像】，实例套餐选择适合自己的，然后提交订单，付款即可。如果不选择【Docker基础镜像】，后面需要自行安装docker容器。

安装imgproxy

imgproxy的安装十分简单，简单的只需要一行命令就可以搞定

docker run -d –name imgproxy –restart always -p 8081:8080 darthsim/imgproxy

复制代码

上面命令运行结束以后，imgproxy就已经运行起来了。我们可以测试一下效果

首先打开 http://ip:8081，可以看到下面的页面

说明imgproxy已经正常启动了。我们尝试让其代理一下nasa的这张2000*1125的这张大图来测试一下效果

原图

https://www.nasa.gov/sites/default/files/thumbnails/image/pia22228.jpg

复制代码

将其转换为 400*400的图片

http://ip:8081/xxxxxx/resize:fill:400:400:0/plain/https://www.nasa.gov/sites/default/files/thumbnails/image/[email protected]

复制代码

其中 xxxxxx 代表签名字符串，默认启动的docker容器没有开启签名功能，因此这个签名参数可以任意填写，我这里填写的xxxxx。
resize代表指示imgproxy要调整图片的大小，fill代表调整大小的模式是填充模式，一共有fit、fill、fill-down、force、auto五种模式可以选。400:400这个代表分辨率调整到400*400，后面的0代表是否启用enlarge模式，这个模式如果被启用，如果给定的大小大于图片的原始大小的话，imgproxy会放大图片。
plain表示后面的图片地址是明文模式。plain后面就是原始图片的地址。最后@png代表要将原始的jpeg图片转换为png格式。
更多处理参数可以查看原始文档 https://docs.imgproxy.net/generating_the_url

效果

将其转换为200*200的图片，并旋转90度

http://ip:8081/xxxxxx/resize:fill:200:200:0/rot:90/plain/https://www.nasa.gov/sites/default/files/thumbnails/image/[email protected]

复制代码

效果

https://www.hualigs.cn/image/61a1d96a9330f.jpg

复制代码

配置imgproxy

可以通过环境变量来配置imgproxy，改变其工作模式。下面说一下我用的几个参数。其余更多的配置项可以参考官方文档https://docs.imgproxy.net/configuration

IMGPROXY_READ_TIMEOUT #读取原始图片的时间，如果imgproxy和原始图片的服务器之间的网络不是太好的话，可以适当调整这个参数
IMGPROXY_MAX_SRC_RESOLUTION #原始图片最大分辨率，默认是16.8，单位是百万像素，例如，如果一个图片的分辨率是5000*5000，其像素个数是25000000,即25百万像素，这个图片就会被拒绝处理。如果我们的原始图片有很多大图的话，就需要调整这个值了
IMGPROXY_MAX_SRC_FILE_SIZE #和上面的参数类似，指定原始图片的最大大小，默认不限制
IMGPROXY_ALLOWED_SOURCES #设置允许的原始图片地址，用逗号隔开，这样可以防止别人滥用服务

复制代码

综上，启动imgproxy的命令可以是

ocker run -d –name imgproxy –restart always –env "IMGPROXY_MAX_SRC_RESOLUTION=25" –env "IMGPROXY_ALLOWED_SOURCES=https://img.xxxx.cc/,https://img.yyyy.cc/" –env="IMGPROXY_READ_TIMEOUT=1000" darthsim/imgproxy

复制代码

上面讲的内容可以满足一般用户的需要，除此之外，imgproxy还支持更高级的防滥用机制，那就是签名参数。不过这个方法需要自己在后台生成签名的url，不能在前端直接拼接，因此我暂时没有用到，有兴趣的小伙伴可以研究一下

最后

imgproxy的功能是十分强大的。当然如果小伙伴觉得使用起来很麻烦的话，可以直接试试腾讯云的COS，使用起来更加简单容易。

好一个技术贴帮顶

@solomon314 看一下是否符合你的要求

不明觉厉，帮顶收藏吃灰一气呵成

lixiaofei 发表于 2021-11-27 15:25
@solomon314 看一下是否符合你的要求

好的感谢，方便的话还是oss/cos方便的，自建的话麻烦一点。

收藏一下,没准以后能用上

这么快就沉了

太复杂了，用zimg docker部署就行，各种大图，小图等

cpu要求高吗?

daqiang 发表于 2021-11-27 15:50
太复杂了，用zimg docker部署就行，各种大图，小图等

这个也是docker部署的，一行命令就行了。而且本身不存储图片，是处理远程图片的，可以和别的图床配合使用