阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

Nginx图片剪裁模块探究 http_image_filter_module

188次阅读
没有评论

共计 6178 个字符,预计需要花费 16 分钟才能阅读完成。

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

Nginx 图片剪裁模块探究 http_image_filter_module

 

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

 

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

更多详情见请继续阅读下一页的精彩内容:http://www.linuxidc.com/Linux/2013-11/93329p2.htm

推荐阅读

Nginx 实现反向代理和负载均衡的配置及优化 http://www.linuxidc.com/Linux/2013-11/92909.htm

Nginx 做负载均衡报:nginx: [emerg] could not build the types_hash http://www.linuxidc.com/Linux/2013-10/92063.htm

Nginx 负载均衡模块 ngx_http_upstream_module 详述 http://www.linuxidc.com/Linux/2013-10/91907.htm

Nginx+Firebug 让浏览器告诉你负载均衡将请求分到了哪台服务器 http://www.linuxidc.com/Linux/2013-10/91824.htm

Ubuntu 安装 Nginx php5-fpm MySQL(LNMP 环境搭建) http://www.linuxidc.com/Linux/2012-10/72458.htm

Nginx 的详细介绍 :请点这里
Nginx 的下载地址 :请点这里

nginx.conf:

—————————————————

location ~* /image {

image_filter resize 200 200;

}

—————————————————

 

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

Nginx 图片剪裁模块探究 http_image_filter_module

 

长 > 宽

Nginx 图片剪裁模块探究 http_image_filter_module

Test1:

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Test2:

 

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

 


 

长 < 宽

Nginx 图片剪裁模块探究 http_image_filter_module

 

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

1、先进么判断长还是宽哪个像素占的多。

2、长 / 宽做成一个比例。

3、如果长占像素多就以长为标准,宽为比例。

4、如果宽占像素多就以宽为标准,长为比例。

 

模拟程序

 

1
2
3
4
5
6
7
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

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

那就明显了。

resize: 图片完整,比例缩小。

crop: 图片不完整,但完全按我们提供的来。

rotate: 旋转图片。

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

Nginx 图片剪裁模块探究 http_image_filter_module

 

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

 

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

更多详情见请继续阅读下一页的精彩内容:http://www.linuxidc.com/Linux/2013-11/93329p2.htm

推荐阅读

Nginx 实现反向代理和负载均衡的配置及优化 http://www.linuxidc.com/Linux/2013-11/92909.htm

Nginx 做负载均衡报:nginx: [emerg] could not build the types_hash http://www.linuxidc.com/Linux/2013-10/92063.htm

Nginx 负载均衡模块 ngx_http_upstream_module 详述 http://www.linuxidc.com/Linux/2013-10/91907.htm

Nginx+Firebug 让浏览器告诉你负载均衡将请求分到了哪台服务器 http://www.linuxidc.com/Linux/2013-10/91824.htm

Ubuntu 安装 Nginx php5-fpm MySQL(LNMP 环境搭建) http://www.linuxidc.com/Linux/2012-10/72458.htm

Nginx 的详细介绍 :请点这里
Nginx 的下载地址 :请点这里

测试一下 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;

}

——————————————————————

 

 

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

品茶:这就是效果

 

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;

}

—————————————————

那么效果是:

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

Nginx 图片剪裁模块探究 http_image_filter_module

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

正文完
星哥说事-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2022-01-20发表,共计6178字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中