Nginx图片剪裁模块探究 http_image_filter_module 推荐

官方地址：http://nginx.org/en/docs/http/ngx_http_image_filter_module.html
煮酒品茶:前半部安装和官方说明，后半部分实践
#yum install -y gd-devel

Install add http_image_filter_module Module
#./configure --prefix=/usr/local/nginx_image_filter/ --with-http_image_filter_module
#make && make install

use:




off:关闭模块处理

test:确保图片是jpeg gif png否则返415错误

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

rotate 90|180|270:旋转指定度数的图像，参数可以包括变量，单独或一起与resize crop一起使用。

resize width height：按比例减少图像到指定大小，公减少一个可以另一个用"-"来表示,出错415，参数值可包含变量，可以与rotate一起使用，则两个一起生效。

resize width height：按比例减少图像大小，其它和rotate一样。

crop width height：按比例减少图像比较大的侧面积和另一侧多余的载翦边缘，其它和rotate一样。没太理解

#设置读取图像缓冲的最大大小，超过则415错误。
syntax:image_filter_buffer size;
default:
image_filter_buffer 1M;
context:http, server, location

#如果启用，最终的图像将被交错。对于JPEG，最终的图像将在“渐进式JPEG”格式。
syntax:image_filter_interlace on | off;
default:
image_filter_interlace off;
context:http, server, location
This directive appeared in version 1.3.15.

#设置变换的JPEG图像的期望质量。可接受的值是从1到100的范围内。较小的值通常意味着既降低图像质量，减少传输数据，推荐的最大值为95。参数值可以包含变量。
syntax:image_filter_jpeg_quality quality;
default:
image_filter_jpeg_quality 75;
context:http, server, location

#增加了最终图像的清晰度。锐度百分比可以超过100。零值将禁用锐化。参数值可以包含变量。
syntax:image_filter_sharpen percent;
default:
image_filter_sharpen 0;
context:http, server, location

#定义是否应该透明转换的GIF图像或PNG图像与调色板中指定的颜色时，可以保留。透明度的损失将导致更好的图像质量。在PNG的Alpha通道总是保留透明度。
syntax:image_filter_transparency on|off;
default:
image_filter_transparency on;
context:http, server, location

image_filter resize width height;
Json：




品茶：这比例不知道具体怎么算的测一测。
nginx.conf:
---------------------------------------------------
location ~* /image {
image_filter resize 200 200;
}
---------------------------------------------------

测试数据过程：每次重启nginx 和清浏览器缓存并多次刷新




长>宽



Test1:















Test2:

















长<宽




品茶：那么就容易理解了：
1、先进么判断长还是宽哪个像素占的多。
2、长/宽做成一个比例。
3、如果长占像素多就以长为标准，宽为比例。
4、如果宽占像素多就以宽为标准，长为比例。

模拟程序

l = get(jpg.l)
w = get(jpg.k)
g = l / w
if l > w:
print nginx.l nginx.l/g
else:
print nginx.w*w w

image_filter rotate 90 | 180 | 270;
品茶：只能用这三个值，不然nginx启动报错。分别是左转倒转和右转，逆时针的。
nginx.conf
---------------------------------------------------------
location ~* /image {
#image_filter resize 500 500;
image_filter rotate 90;
}
---------------------------------------------------------
逆时针90度 ：90
逆时针180度：180
逆时针270度：270












那就明显了。
resize:图片完整，比例缩小。
crop:图片不完整，但完全按我们提供的来。
rotate:旋转图片。
测试一下test

test:
{ "img" : { "width": 1920, "height": 1200, "type": "jpeg" } }
test2:
{ "img" : { "width": 1920, "height": 1080, "type": "jpeg" } }
test3:
{ "img" : { "width": 354, "height": 586, "type": "png" } }
输出json格式，可以用来调用。

image_filter_buffer size;
我们试试超过1M的文件
415 Unsupported Media Type
品茶：这个值看你怎么设了，因为iphone现在拍的原图基本上是4-8M左右

image_filter_interlace on
品茶：渐进式jpeg没懂啥意思

image_filter_jpeg_quality quality; #quality:1-100
品茶：这个值控制图片的质量，影响清晰度

nginx.conf
-----------------------------------------------------------------
location ~* /image {
image_filter_jpeg_quality 20;
image_filter resize 500 500;
image_filter_buffer 10M;
image_filter_interlace on;
#image_filter rotate 20;
#image_filter crop 200 200;
#image_filter size;
#image_filter test;
}
------------------------------------------------------------------
















品茶：这就是效果

image_filter_sharpen percent;
品茶：锐化比

image_filter_transparency on|off;
品茶：透明损失度

品茶：想了一下写几个规则，可能有用。

比如匹配全站所有的结尾图片
----------------------------------------------
location ~* \.(jpg|gif|png)$ {
image_filter resize 500 500;
}
----------------------------------------------

匹配某个目录所有图片
----------------------------------------------
location ~* /image/.*\.(jpg|gif|png)$ {
image_filter resize 500 500;
}
----------------------------------------------

再比如用url来指定
---------------------------------------------------

location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {
set $width $3;
set $height $4;
rewrite "(.*\.(jpg|gif|png))(.*)$" $1;
}

location ~* .*\.(jpg|gif|png)$ {
image_filter resize $width $height;
}
---------------------------------------------------
那么效果是：












品茶：是不是很cool，哈哈，更新完毕了。