Nginx-image_fileter

  • ngx_http_image_filter_module 支持轉換 jpeg、gif、png、webp(1.11.6+)格式的圖片。
  • 如果nginx是編譯源碼安裝的,默認是不編譯image_filter模塊的,需要加上--with-http_image_filter_module編譯參數才行。
  • 改模塊有賴于libgd庫,建議安裝最新版本的libgd庫
    • yum install gd-devel
    • apt-get install libgd2-xpm-dev
  • 為支持webp格式,libgd庫編譯時必須加入webp支持。
  • image_filter 用在location語境中
    • off 默認配置為 image_filter off;,關閉該模塊處理
    • test 確保相應圖片格式為JPEG, GIF, PNG, 或 WebP,否則返回415(Unsupported Media Type) 錯誤
    • size 以json格式輸出圖片信息:{ "img" : { "width": 100, "height": 100, "type": "gif" } },出錯時返回{}
    • rotate 90|180|270 圖片逆時針選擇特定角度,可與resize,crop合用
    • resize $width $length 將圖片按比例壓縮到指定大小,若只對某個維度進行壓縮, 另一個維度可以指定為"-",當與rotate合用時,先resize再rotate
    • crop $width $length 按比例剪切圖片到指定大小,若只對某個維度進行壓縮, 另一個維度可以指定為"-",當與rotate合用時,先rotate再crop
  • image_filter_buffer $size 設置圖片讀取的緩存區最大值,當超過緩存區限制時,返回415錯誤
  • image_filter_interlace on|off 若設置為on,則最后輸出的圖片是隔行掃描的,如果是jpeg圖片,就是progressive JPEG格式,這樣顯示圖片時,會先顯示整個圖片的模糊輪廓,隨著掃描次數的增加,圖片變得越來越清晰,
  • image_filter_jpeg_quality $quality 設置jpeg圖片壓縮質量,1-100取值,建議最大設置為95,默認值是75
  • image_filter_sharpen $percent 對圖片做銳化處理,默認值為0,即不處理
  • image_filter_transparency on|off 是否保持用調色板指定顏色的gif、png圖片中的透明度,透明度的損失會使圖片質量更好,PNG中Alpha通道的透明度始終保持。
  • image_filter_webp_quality $quality 設置webp圖片壓縮質量,1-100取值,默認為80

配置實例:

  • /<width>X<length>/path/to/imagefile 按制定大小剪切圖片
  • /path/to/imagefile 默認按1280寬度壓縮圖片
  • Nginx添加圖片緩存

cache img server

server {
    listen 80;
    server_name  img.example.com;
    add_header X-Cache $upstream_cache_status;

    location / {
        proxy_pass http://127.0.0.1:10299;
        proxy_cache thumbnail_cache;
        # proxy_cache_key "$host$document_uri$is_args$arg_key";
        proxy_cache_key "$host$document_uri";
        proxy_cache_lock on;
        proxy_cache_valid 30d;  # Cache valid thumbnails for 30 days.
        proxy_cache_valid any 15s;  # Everything else gets 15s.
        proxy_cache_use_stale error timeout invalid_header updating;
        proxy_http_version 1.1;
        expires 30d;
    }
}

image processing server

server {
    listen 10299;
    server_name 127.0.0.1;
    image_filter_jpeg_quality 85;  
    image_filter_buffer 12M;
    image_filter_interlace on;

    error_page 404 =404 /empty.gif;

    location ~ ^/(?<width>[\d-]+)x(?<height>[\d-]+)/(?<path>.*\.(?<ext>[a-z_]*))$ {
        alias /var/www/html/static/$path;
        image_filter crop $width $height;
    }

    # location ~ ^/j/(?<sig>[^/]+)/(?<width>[\d-]+)x(?<height>[\d-]+)/(?<path>.*\.(?<ext>[a-z_]*))$ {
    #     secure_link $sig;  # The hash is stored in the `key` querystring arg.
    #     secure_link_md5 "/$path my-secret-key";
    #     if ($secure_link = "") {
    #         return 404;
    #     }
    #     alias /var/www/html/static/$path;
    #     image_filter crop $width $height;
    # }

    location / {
        root /var/www/html/static/;
        image_filter resize 1280 -;
    }
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 移動端圖片格式調研 圖片通常是移動端流量耗費最多的部分,并且占據著重要的視覺空間。合理的圖片格式選用和優化可以為你...
    AngeloD閱讀 1,253評論 0 5
  • 注明:本人原創翻譯,原版為Essential Image Optimization電子書,這里將其拆分為幾篇文章發...
    ProteanBear閱讀 5,282評論 0 5
  • 圖片通常是移動端流量耗費最多的部分,并且占據著重要的視覺空間。合理的圖片格式選用和優化可以為你節省帶寬、提升視覺效...
    傻傻小蘿卜閱讀 789評論 1 9
  • image_op函數使用。 一、圖像的讀取及保存 二、尺寸調整 三、色彩模式調整 四 其它 Note that i...
    華夏意匠閱讀 4,193評論 0 0
  • 一個暑假真的可以讓一個人改變很多。我們每一個人都是在不斷挑戰自己舒適圈的過程中獲得成長。 今天是暑假工的第三天,工...
    以夢為馬an閱讀 149評論 0 0