cdn图片缓存(获取不同尺寸图片新技巧!轻松用腾讯云轻量服务器搭建imgproxy)
现在很多站长都喜欢搭建一个自己的私有图床来管理图片,使用的一般都是第三方的开源图床程序,但有时候可能第三方的图床程序不能完全满足我们的需要,这样的痛点需求由来已久。
比如,我们上传一张图片以后,在不同的页面下,会要求显示不同的分辨率。常见的在图片列表页面显示的64*64的小缩略图,在瀑布流模式下显示的中型尺寸图片,以及原图模式下显示的完全尺寸的原图。
除此之外,我们也可能想对图片进行压缩来节省流量,比如上传的png图片,但是显示时显示jpeg图片来加快用户的访问速度。
针对这些需求,要怎么办呢?
我终于发现了这么一款神奇的应用imgproxy,官方网站是https://imgproxy.net/。通过名字就知道,这是一个图片代理服务,简单的来说,这个软件会反代真正的图片地址,当请求图片的时候,请求的是imgproxy的图片地址,然后imgproxy再去请求原始图片,将其转换为要求的尺寸和格式以后,再发送给用户。除了这些以外,imgproxy还可以对原始图片进行模糊化、旋转、亮度调节、加水印等很多功能,具体可以去看官方的文档说明。
官方也给了一个其工作的原理图。从下图中可以看出,可以在imgproxy前面再配一层CDN来缓存已经配置好的图片。
1、购买服务器
如果没有服务器的话,需要先购买一台腾讯云的轻量服务器。
轻量应用服务器(TencentCloud Lighthouse)是新一代开箱即用、面向轻量应用场景的云服务器产品,助力中小企业和开发者便捷高效的在云端构建网站、小程序/小游戏、电商、云盘/图床以及各类开发测试和学习环境,相比普通云服务器更加简单易用,提供高带宽流量包并以套餐形式整体售卖基础云资源,将热门开源软件融合打包实现一键构建应用,是您使用腾讯云的最佳入门途径。为了方便安装应用,我们需要准备Docker环境。
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。使用docker来部署应用是非常简单的,一般情况下,只需要一行命令即可完成。
腾讯云经常举办各种活动,可以点击这里进入他们的活动页面进行购买,可以选择距离最近的区域购买,不过不想备案的话,可以选择香港区域购买。镜像的话,选择【官方镜像】下的【docker基础镜像】,实例套餐选择适合自己的,然后提交订单,付款即可。如果不选择【Docker基础镜像】,后面需要自行安装docker容器。
2、安装docker
如果没有选择docker基础镜像,则需要自行安装docker镜像。这里假设使用的Ubuntu系统。安装docker的步骤如下
sudo apt-get update
sudo apt-get install ca-certificates curl gnupg lsb-release
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg –dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo \
"deb [arch=$(dpkg –print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
- 安装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/pia22228.jpg@png
其中 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
访问上面的地址,已经变成了400*400的中等图片了。
将其转换为200*200的图片,并旋转90度
http://ip:8081/xxxxxx/resize:fill:200:200:0/rot:90/plain/https://www.nasa.gov/sites/default/files/thumbnails/image/pia22228.jpg@png
4、配置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,不能在前端直接拼接,因此我暂时没有用到,有兴趣的小伙伴可以研究一下。
本文参考来源/李小飞
发布于:2022-12-28,除非注明,否则均为
原创文章,转载请注明出处。
发表评论