#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:關(guān)閉模塊處理

test:確保圖片是jpeg gif png否則返415錯(cuò)誤

size:輸出有關(guān)圖像的json格式：如下顯示

{ "img" : { "width": 100, "height": 100, "type": "gif" } }

出錯(cuò)顯示：

{}

rotate 90|180|270:旋轉(zhuǎn)指定度數(shù)的圖像，參數(shù)可以包括變量，單獨(dú)或一起與resize crop一起使用。

resize width height：按比例減少圖像到指定大小，公減少一個(gè)可以另一個(gè)用"-"來(lái)表示,出錯(cuò)415，參數(shù)值可包含變量，可以與rotate一起使用，則兩個(gè)一起生效。

resize width height：按比例減少圖像大小，其它和rotate一樣。

crop width height：按比例減少圖像比較大的側(cè)面積和另一側(cè)多余的載翦邊緣，其它和rotate一樣。沒(méi)太理解

#設(shè)置讀取圖像緩沖的最大大小，超過(guò)則415錯(cuò)誤。

syntax:image_filter_buffer size;

default:

image_filter_buffer 1M;

context:http, server, location

#如果啟用，最終的圖像將被交錯(cuò)。對(duì)于JPEG，最終的圖像將在“漸進(jìn)式JPEG”格式。

syntax:image_filter_interlace on | off;

default:

image_filter_interlace off;

context:http, server, location

This directive appeared in version 1.3.15.

#設(shè)置變換的JPEG圖像的期望質(zhì)量。可接受的值是從1到100的范圍內(nèi)。較小的值通常意味著既降低圖像質(zhì)量，減少傳輸數(shù)據(jù)，推薦的最大值為95。參數(shù)值可以包含變量。

syntax:image_filter_jpeg_quality quality;

default:

image_filter_jpeg_quality 75;

context:http, server, location

#增加了最終圖像的清晰度。銳度百分比可以超過(guò)100。零值將禁用銳化。參數(shù)值可以包含變量。

syntax:image_filter_sharpen percent;

default:

image_filter_sharpen 0;

context:http, server, location

#定義是否應(yīng)該透明轉(zhuǎn)換的GIF圖像或PNG圖像與調(diào)色板中指定的顏色時(shí)，可以保留。透明度的損失將導(dǎo)致更好的圖像質(zhì)量。在PNG的Alpha通道總是保留透明度。

syntax:image_filter_transparency on|off;

default:

image_filter_transparency on;

context:http, server, location

image_filter resize width height;

Json：

品茶：這比例不知道具體怎么算的測(cè)一測(cè)。

nginx.conf:

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

? ? ? ?location ~* /image {

? ? ? ? ? ? ? ?image_filter resize 200 200;

? ? ? ?}

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

測(cè)試數(shù)據(jù)過(guò)程：每次重啟nginx 和清瀏覽器緩存并多次刷新

長(zhǎng)>寬

Test1:

Test2:

長(zhǎng)<寬

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

1、先進(jìn)么判斷長(zhǎng)還是寬哪個(gè)像素占的多。

2、長(zhǎng)/寬做成一個(gè)比例。

3、如果長(zhǎng)占像素多就以長(zhǎng)為標(biāo)準(zhǔn)，寬為比例。

4、如果寬占像素多就以寬為標(biāo)準(zhǔn)，長(zhǎng)為比例。

模擬程序

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;

品茶：只能用這三個(gè)值，不然nginx啟動(dòng)報(bào)錯(cuò)。分別是左轉(zhuǎn)倒轉(zhuǎn)和右轉(zhuǎn)，逆時(shí)針的。

nginx.conf

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

? ? ? ?location ~* /image {

? ? ? ? ? ? ? ?#image_filter resize 500 500;

? ? ? ? ? ? ? ?image_filter rotate 90;

? ? ? ?}

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

逆時(shí)針90度 ：90

逆時(shí)針180度：180

逆時(shí)針270度：270

那就明顯了。

resize:圖片完整，比例縮小。

crop:圖片不完整，但完全按我們提供的來(lái)。

rotate:旋轉(zhuǎn)圖片。

測(cè)試一下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格式，可以用來(lái)調(diào)用。

image_filter_buffer size;

我們?cè)囋嚦^(guò)1M的文件

415 Unsupported Media Type

品茶：這個(gè)值看你怎么設(shè)了，因?yàn)閕phone現(xiàn)在拍的原圖基本上是4-8M左右

image_filter_interlace on

品茶：漸進(jìn)式j(luò)peg沒(méi)懂啥意思

image_filter_jpeg_quality quality; #quality:1-100

品茶：這個(gè)值控制圖片的質(zhì)量，影響清晰度

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;

品茶：透明損失度

品茶：想了一下寫(xiě)幾個(gè)規(guī)則，可能有用。

比如匹配全站所有的結(jié)尾圖片

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

? ? ? ?location ~* \.(jpg|gif|png)$ {

? ? ? ? ? ? ? ?image_filter resize 500 500;

? ? ? ?}

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

匹配某個(gè)目錄所有圖片

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

? ? ? ?location ~* /image/.*\.(jpg|gif|png)$ {

? ? ? ? ? ? ? ?image_filter resize 500 500;

? ? ? ?}

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

再比如用url來(lái)指定

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

? ? ? ?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，哈哈，更新完畢了。

本文轉(zhuǎn)自 煮酒品茶 51CTO博客，原文鏈接：http://blog.51cto.com/cwtea/1333142，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的Nginx图片剪裁模块探究 http_image_filter_module的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。