官方地址:http://nginx.org/en/docs/http/ngx_http_p_w_picpath_filter_module.html
煮酒品茶:前半部安装和官方说明,后半部分实践
#yum install -y gd-devel
Install add http_p_w_picpath_filter_module Module
#./configure --prefix=/usr/local/nginx_p_w_picpath_filter/ --with-http_p_w_picpath_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:p_w_picpath_filter_buffer size;
default:
p_w_picpath_filter_buffer 1M;
context:http, server, location
#如果启用,最终的图像将被交错。对于JPEG,最终的图像将在“渐进式JPEG”格式。
syntax:p_w_picpath_filter_interlace on | off;
default:
p_w_picpath_filter_interlace off;
context:http, server, location
This directive appeared in version 1.3.15.
#设置变换的JPEG图像的期望质量。可接受的值是从1到100的范围内。较小的值通常意味着既降低图像质量,减少传输数据,推荐的最大值为95。参数值可以包含变量。
syntax:p_w_picpath_filter_jpeg_quality quality;
default:
p_w_picpath_filter_jpeg_quality 75;
context:http, server, location
#增加了最终图像的清晰度。锐度百分比可以超过100。零值将禁用锐化。参数值可以包含变量。
syntax:p_w_picpath_filter_sharpen percent;
default:
p_w_picpath_filter_sharpen 0;
context:http, server, location
#定义是否应该透明转换的GIF图像或PNG图像与调色板中指定的颜色时,可以保留。透明度的损失将导致更好的图像质量。在PNG的Alpha通道总是保留透明度。
syntax:p_w_picpath_filter_transparency on|off;
default:
p_w_picpath_filter_transparency on;
context:http, server, location
p_w_picpath_filter resize width height;
Json:
品茶:这比例不知道具体怎么算的测一测。
nginx.conf:
---------------------------------------------------
location ~* /p_w_picpath {
p_w_picpath_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
p_w_picpath_filter rotate 90 | 180 | 270;
品茶:只能用这三个值,不然nginx启动报错。分别是左转倒转和右转,逆时针的。
nginx.conf
---------------------------------------------------------
location ~* /p_w_picpath {
#p_w_picpath_filter resize 500 500;
p_w_picpath_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格式,可以用来调用。
p_w_picpath_filter_buffer size;
我们试试超过1M的文件
415 Unsupported Media Type
品茶:这个值看你怎么设了,因为iphone现在拍的原图基本上是4-8M左右
p_w_picpath_filter_interlace on
品茶:渐进式jpeg没懂啥意思
p_w_picpath_filter_jpeg_quality quality; #quality:1-100
品茶:这个值控制图片的质量,影响清晰度
nginx.conf
-----------------------------------------------------------------
location ~* /p_w_picpath {
p_w_picpath_filter_jpeg_quality 20;
p_w_picpath_filter resize 500 500;
p_w_picpath_filter_buffer 10M;
p_w_picpath_filter_interlace on;
#p_w_picpath_filter rotate 20;
#p_w_picpath_filter crop 200 200;
#p_w_picpath_filter size;
#p_w_picpath_filter test;
}
------------------------------------------------------------------
品茶:这就是效果
p_w_picpath_filter_sharpen percent;
品茶:锐化比
p_w_picpath_filter_transparency on|off;
品茶:透明损失度
品茶:想了一下写几个规则,可能有用。
比如匹配全站所有的结尾图片
----------------------------------------------
location ~* \.(jpg|gif|png)$ {
p_w_picpath_filter resize 500 500;
}
----------------------------------------------
匹配某个目录所有图片
----------------------------------------------
location ~* /p_w_picpath/.*\.(jpg|gif|png)$ {
p_w_picpath_filter resize 500 500;
}
----------------------------------------------
再比如用url来指定
---------------------------------------------------
location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {
set $width $3;
set $height $4;
rewrite "(.*\.(jpg|gif|png))(.*)$" $1;
}
location ~* .*\.(jpg|gif|png)$ {
p_w_picpath_filter resize $width $height;
}
---------------------------------------------------
那么效果是:
品茶:是不是很cool,哈哈,更新完毕了。