背景
在项目开发过程中，经常会遇到一张图片在不同场景下需要使用不同的尺寸，本文旨在使用nginx+imgproxy实现图片的自动裁剪
软件要求
imgproxy，实现图片自动裁剪，以及转码；本文使用docker拉起，不做安装
ngx_devel_kit，nginx模块，用于安装lua-nginx-module和set-misc-nginx-module
lua-nginx-module nginx扩展，实现nginx调用lua
set-misc-nginx-module针对uri做encode/decode
软件安装
docker
sudo yum -y update && sudo yum -y install docker # 安装
sudo systemctl enable docker && sudo systemctl start docker
git
sudo yum -y install git
imgproxy
imgproxy拉起
sudo docker pull darthsim/imgproxy:latest # imgproxy镜像拉取
sudo docker run -d --name imgproxy --restart always -p 8081:8080 -v /opt/data/backend/file:/app/images --env="IMGPROXY_LOCAL_FILESYSTEM_ROOT=/app/images" --user root --privileged darthsim/imgproxy
--user root 根据实际情况，如果文件默认都有读权限，可以不需要
--env="IMGPROXY_LOCAL_FILESYSTEM_ROOT=/app/images"，用于指定imgproxy图片根目录
-v /opt/data/backend/file:/app/images 用于映射本地目录到imgproxy图片根目录
lua
cd /opt/data/soft
wget http://luajit.org/download/LuaJIT-2.0.5.tar.gz
tar -zvxf LuaJIT-2.0.5.tar.gz
cd LuaJIT-2.0.5
sudo make && sudo make install
sudo echo export LUAJIT_LIB=/usr/local/lib >> /etc/profile
sudo echo export LUAJIT_INC=/usr/local/include/luajit-2.0 >> /etc/profile
ngx_devel_kit
git clone https://github.com/vision5/ngx_devel_kit.git
cd ngx_devel_kit
git checkout v0.3.0
lua-ngix-module
cd /opt/data/soft
git clone https://github.com/openresty/lua-nginx-module.git
cd lua-nginx-module
git checkout v0.10.11
set-misc-nginx-module
cd /opt/data/soft
git clone https://github.com/openresty/set-misc-nginx-module.git
cd set-misc-nginx-module
git checkout v0.33
nginx 重新编译/安装
如果重新编译，可以看下nginx之前编译参数
cd /path/to/nginx_src/
sudo ./configure ${历史参数} --with-ld-opt=-Wl,-rpath,/usr/local/lib --add-module=/opt/data/soft/ngx_devel_kit --add-module=/opt/data/soft/set-misc-nginx-module --add-module=/opt/data/soft/lua-nginx-module
sudo make -j2 # 编译
sudo cp /path/to/nginx /path/to/nginx.bak #备份nginx二进制文件
sudo make install
nginx配置
开启nginx缓存
http {
proxy_cache_path /opt/data/nginx/cache levels=1:2 keys_zone=imgproxy:300m max_size=5g;
# 代理缓存配置说明
# /opt/data/nginx/cache 缓存路径
# levels=1:2 缓存目录的层级结构
# keys_zone=imgproxy:300m 缓存名字为imgproxy，缓冲区大小为300m
# max_size=5g 缓存的最大容量为 5GB
}
图片自动裁剪/转码
server {
# 监听端口
listen 80;
# 域名
server_name domain.com; # 图片访问的域名
# 这个路径是基于框架的统一文件访问前缀
location /api/static/file { # 这里/api/static/file是图片访问的基础路径
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
set $encoded_filename "";
if ($request_uri ~* "^/api/static/file/(.*)\?.*$") {
# filename解码,避免重复URL编码
set_unescape_uri $decoded_filename $1;
# 替换filename中的@为%40,否则imgproxy会认为@是分隔符
set_by_lua_block $encoded_filename {
local filename = ngx.var.decoded_filename
local encoded = string.gsub(filename, "@", "%%40")
return encoded
}
}
# 根据路径参数p=true来判断是否进行转发
if ($arg_p = 'true') {
# 将图片处理请求根据imgproxy的规则进行路径重写
rewrite ^(.*)$ /signature/resize:$arg_f:$arg_w:$arg_h:0/plain/local:///$encoded_filename@$arg_t break;
# 转发给imgproxy进行处理
proxy_pass http://127.0.0.1:8081;
expires max;
# 基于浏览器的缓存 携带此请求头浏览器会缓存图片
add_header Cache-Control "public, no-transform";
}
# 没有携带参数p则直接请求原图 10001为后端服务的路径
proxy_pass http://127.0.0.1:10001;
# 启用基于nginx的代理缓存 指定缓存名称
proxy_cache imgproxy;
# 配置缓存key的规则
proxy_cache_key $scheme$proxy_host$uri$is_args$args;
# 基于http状态码来配置缓存的过期时间 这里设置为30天
proxy_cache_valid 200 304 302 30d;
expires max;
add_header Cache-Control "public, no-transform";
}
}
nginx重启
sudo /path/to/nginx -t # 校验配置文件
sudo /path/to/nginx -s reload # 重启nginx
参数说明
p：true则代理图片
w：图片宽度
h：图片高度
f：缩放选项 fit保持宽高比 fill不保持宽高比直接裁剪
t：图片类型 建议jpg 有特殊要求的可使用png
比如原图
http://www.domain.com/api/static/file/xxxxxx.png
缩略图
http://www.domain.com/api/static/file/xxxxxx.png?p=true&w=300&t=jpg&f=fit
Last updated