官方地址: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:

Nginx图片剪裁模块探究 http_image_filter_module_Nginx


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图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_02


品茶:这比例不知道具体怎么算的测一测。

nginx.conf:

---------------------------------------------------

       location ~* /p_w_picpath {

               p_w_picpath_filter resize 200 200;

       }

---------------------------------------------------


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

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_03


长>宽

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_04

Test1:

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_05

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_06

Nginx图片剪裁模块探究 http_image_filter_module_local_07

Nginx图片剪裁模块探究 http_image_filter_module_local_08

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_09

Test2:

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_10

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_11

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_12

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_13

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_14





长<宽

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_15


品茶:那么就容易理解了:

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

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_16

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_17

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_18

Nginx图片剪裁模块探究 http_image_filter_module_local_19

那就明显了。

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;

       }

------------------------------------------------------------------



Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_20

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_21

Nginx图片剪裁模块探究 http_image_filter_module_local_22

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_23

Nginx图片剪裁模块探究 http_image_filter_module_Nginx_24

品茶:这就是效果


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;

       }

---------------------------------------------------

那么效果是:

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_25

Nginx图片剪裁模块探究 http_image_filter_module_local_26

Nginx图片剪裁模块探究 http_image_filter_module_Nginx图片剪裁模块_27

Nginx图片剪裁模块探究 http_image_filter_module_local_28

品茶:是不是很cool,哈哈,更新完毕了。