共计 1539 个字符,预计需要花费 4 分钟才能阅读完成。
本站提供 Linux 服务器运维,自动化脚本编写等服务,如有需要请联系博主微信:xiaozme
Nginx 自身提供了一个模块 --with-http_image_filter_module
支持图像裁剪,如果只是单一 Nginx 节点使用,并没有什么问题。但如果是多个 nginx 都需要支持图像裁剪,那么不得不每个 nginx 节点在编译的时候都需要考虑启用 --with-http_image_filter_module
模块。该模块使用 GD 库进行裁剪,性能方面也不是很好。我们完全可以使用更高性能,且更灵活的 thumbor 图像裁剪从而来替代--with-http_image_filter_module
场景
xiaoz 的场景是,有多个 nginx 节点作为 CDN 集群,对图片等静态资源进行 CDN 缓存加速。当我访问 https://domain.com/123.jpg
的时候我希望带上参数就能生成缩略图,比如我想裁剪一张 200 * 150px
像素的缩略图,只需要带上参数访问 https://domain.com/123.jpg/cut?w=200&h=150
即可。
使用 ProcessOn 画一下大概的流程图:
准备工作
- 已经安装 Nginx
- 已经安装 thumbor,参考:使用 Docker 搭建一个开源图像裁剪服务 thumbor
实现
在你的 nginx 反向代理配置中(server 段内)添加下面的配置:
# 图像裁剪
location ~* /(.+)\.(jpg|gif|png|jpeg|webp|bmp)/cut {
#声明完整的请求地址
set $foo $scheme://$host/$1.$2;
add_header XCDN-Cut 'success';
#忽略源站 header,强制缓存
proxy_ignore_headers X-Accel-Expires Expires Cache-Control Set-Cookie Vary;
proxy_connect_timeout 5;
# Default is HTTP/1, keepalive is only enabled in HTTP/1.1
proxy_http_version 1.1;
proxy_set_header Connection "";
#chunked_transfer_encoding off;
#反向代理图像裁剪
proxy_pass http://192.168.123.4:8888/unsafe/${arg_w}x${arg_h}/$foo;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
...
}
上面的配置是匹配图像格式,并使用 thumbor 进行裁剪,大概解释下上面参数含义
set $foo $scheme://$host/$1.$2;
这一句是获取完整的图片地址(如https://domain.com/123.jpg
),并赋值给变量$foo
add_header XCDN-Cut 'success';
添加了一个自定义 header 响应字段XCDN-Cut
, 方便判断和调试proxy_pass
指令中我们请求了 thumbor 的 HTTP API 进行图像裁剪,http://192.168.123.4:8888/
改成你自己的 thumbor 地址
以上只是最基础的实现,具体规则请根据实际情况调整,比如缓存、防盗链等。
总结
通过上述方式,无需在 nginx 上额外编译 --with-http_image_filter_module
模块即可赋予 nginx 图像裁剪的能力,有多个 nginx 节点的情况下,依赖 thumbor 进行集中裁剪图像更加简单方便。
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)