利用 nginx 自动生成缩略图

全栈 shanhuhai 1366℃

导语

如今的软件行业面向的终端越来越多,传统的 PC,现在正大火的移动端,还有正在逐步互联网化的电视、冰箱、可穿戴设备等,为了让公司的软件能兼容不同的终端,前端的同学们正在面临越来越多的挑战。

为了适配不同的设备,同学们不得不把一图片做好几个版本,其实这个事可以让运维来干,那就是在 nginx 上加一个模块,将要生成的图片的参数传入url来自动生成想要的图片,虽然可能不是那么完美,但是对于前端要求不太高的公司来说,还是省了不少事,下面就是配置方法。

部署

环境要求

操作系统: Centos 6.2
nginx: > 0.7.54

安装方法

首先在服务器上要安装 gd-devel 包:

yum -y install gd-devel

在你原来的编译命令后加上 –with-http_image_filter_module 例如:

./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --without-http-cache --with-http_ssl_module --with-http_image_filter_module

然后重新编译安装,然后重启 niginx 就可以了,运行:

sbin/nginx -V

查看返回的结果中有了 –with-http_image_filter_module 表明安装成功了。

配置方法

这里给出一个简单的例子来,演示使用方法:
在你的域名的配置文件中添加

location ~* /(.+)\.(jpg|gif|png)!(\d+)_(\d+)$ {
        set $h $3;
        set $w $4;
        if ($h = "0") {
            rewrite /(.+)_(\d+)_(\d+)\.(jpg|gif|png)$ /$1.$2 last;
        }
        if ($w = "0") {
            rewrite /(.+)_(\d+)_(\d+)\.(jpg|gif|png)$ /$1.$2 last;
        }

        #根据给定的长宽生成缩略图
        image_filter resize $h $w;
        #原图最大2M,要裁剪的图片超过2M返回415错误,需要调节参数image_filter_buffer
        image_filter_buffer 2M;

        try_files /$1.$2  /notfound.jpg ;
}

通过 sbin/nginx -s reload 重载你的nginx配置

使用方法

通过在图片地址后加 !缩略图宽_缩略图高,就可以访问到你想要的任意尺寸的缩略图了
例如图片地址为:http://xxx.cn/image/20141014/543cc6ff93d55.jpg
修改为:http://xxx.cn/image/20141014/543cc6ff93d55.jpg!100_200
将会返回 100*200 的缩略图

延伸

利用 nginx 的 image_filter 模块不仅仅能生成缩略图,你可以通过修改配置来实现其他的功能,比如图片旋转、图片裁剪、图片透明化等等,Nb 的功能是靠勤劳的双手创造的
关于 image_filter 的更多 参见:
http://nginx.org/cn/docs/http/ngx_http_image_filter_module.html

转载请注明:大后端 » 利用 nginx 自动生成缩略图

喜欢 (0)or分享 (0)