nginx使用image_filter生成缩略图 -- fasdfs海量图片缩略图整合

1 http_image_filter_module

http_image_filter_module是nginx提供的集成图片处理模块，支持nginx-0.7.54以后的版本，在网站访问量不是很高磁盘有限不想生成多余的图片文件的前提下可，就可以用它实时缩放图片，旋转图片，验证图片有效性以及获取图片宽高以及图片类型信息。

 

1.1 查看有没有安装

# /usr/local/nginx/sbin/nginx -V 

 

nginx version: nginx/1.5.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-17) (GCC) 
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_realip_module --add-module=/usr/local/src/nginx/fastdfs-nginx-module/src

 

2 模块说明

image_filter off;
#关闭模块


image_filter test;
#确保图片是jpeg gif png否则返415错误


image_filter size;
#输出有关图像的json格式：例如以下显示{ "img" : { "width": 100, "height": 100, "type": "gif" } } 出错显示：{}


image_filter rotate 90|180|270;
#旋转指定度数的图像，參数能够包括变量，单独或一起与resize crop一起使用。


image_filter resize width height;
#按比例降低图像到指定大小，公降低一个能够还有一个用"-"来表示,出错415，參数值可包括变量，能够与rotate一起使用，则两个一起生效。


image_filter crop width height;
#按比例降低图像比較大的側面积和还有一側多余的载翦边缘，其他和rotate一样。没太理解


image_filter_buffer 10M;
#设置读取图像缓冲的最大大小，超过则415错误。


image_filter_interlace on;
#假设启用，终于的图像将被交错。对于JPEG，终于的图像将在“渐进式JPEG”格式。


image_filter_jpeg_quality 95;
#设置变换的JPEG图像的期望质量。可接受的值是从1到100的范围内。较小的值通常意味着既降低图像质量，降低数据传输，推荐的最大值为95。參数值能够包括变量。


image_filter_sharpen 100;
#添加了终于图像的清晰度。锐度百分比能够超过100。零值将禁用锐化。參数值能够包括变量。


image_filter_transparency on;
#定义是否应该透明转换的GIF图像或PNG图像与调色板中指定的颜色时，能够保留。透明度的损失将导致更好的图像质量。在PNG的Alpha通道总是保留透明度。

 

3 安装

3.1 安装gd，HttpImageFilterModule模块需要依赖gd-devel的支持

# yum -y install gd-devel

 

3.2 将http_image_filter_module包含进来

# cd /usr/local/src/nginx

# ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_realip_module --add-module=/usr/local/src/fastdfs/fastdfs-nginx-module/src --with-http_image_filter_module
#  make && make install

 

4 配置nginx

4.1 正常缩放

# vi /usr/local/nginx/conf/nginx.conf

location ~* /img {
    root /data0; 
    image_filter resize 150 100;
    image_filter rotate 90;      
}

 

http://img2.mydomain.com/img/w8.png

 

4.2 fastdfs配置

a)架构与安装

参考:http://blog.csdn.net/clevercode/article/details/52276169.

 

b)配置

 

location ~ group1/M00/(.+)_([0-9]+)x([0-9]+)\.(jpg|gif|png) {
            alias /data0/fastdfs/storage/storage0/data;
            ngx_fastdfs_module;
            set $w $2;
            set $h $3;           

            if ($w != "0") {
                rewrite group1/M00(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ group1/M00$1.$4 break;
            }

            if ($h != "0") {
                rewrite group1/M00(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ group1/M00$1.$4 break;
            }

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

            #try_files group1/M00$1.$4 $1.jpg;
        }
        

        location ~ group1/M00/(.+)\.?(.+){
           alias /data0/fastdfs/storage/storage0/data;
           ngx_fastdfs_module;
        }

 

 

 

 

 

 

c)访问原图.

http://img2.mydomain.com/group1/M00/00/00/wKhlhFe7DCeAcOvYAAaxqYLWRQk392.png


d)访问缩略图
http://img2.mydomain.com/group1/M00/00/00/wKhlhFe7DCeAcOvYAAaxqYLWRQk392_80x60.png

 

技术交流

CleverCode是一名架构师，技术交流，咨询问题，请加CleverCode创建的qq群(架构师俱乐部)：517133582。加群和腾讯，阿里，百度，新浪等公司的架构师交流。【架构师俱乐部】宗旨：帮助你成长为架构师！