ngx_http_image_filter_module による画像プレビュー

多くの場合、マルチメディアサイトでは、画像をさまざまなサイズ (サムネイル) で表示するタスクがあります。さらに、ほとんどの場合、画像の複数の次元バージョンをサポートする必要があります。

今日は、「ngx_http_image_filter_module」という名前のモジュールについて説明します。このモジュールを使用すると、Web サーバーを介して (追加のリンクなしで) 画像のサイズを直接変更する際の問題を解決できます。それはどのようなもので、何をする必要があるのでしょうか?

インストール

ここから最新バージョンをダウンロードしてください:http://sysoev.ru/nginx/download.html

開始するには、libgd をインストールする必要があります:

# sudo apt-get install libgd2-xpm-dev

デフォルトでは、必要なモジュールはビルドされないため、nginx インストールの構成段階で接続する必要があります:

# ./configure --with-http_image_filter_module
# make
# sudo make install

サーバー構成

次に、画像処理用に Nginx で仮想ホストを構成します。画像をディレクトリ「/home/someuser/images」に保存し、2 次元バージョン + オリジナルを表示したいとします。ルールは次のとおりです:

「example.com/z/」のようにクエリを実行すると、150×150 の端が切り取られたバージョンが表示されます (つまり、常に正方形になります)

“example.com/y/ ” – shows the version inscribed in a 300×300 square
“example.com/ ” – shows the original image

実際の構成:

# Resizing server
server {
        listen       444;
        server_name  localhost;

        location /z/ {
            proxy_pass     http://yourimageserver;  # Backend image server
            image_filter   crop  150 150;         # Resize photo 150x150 and crop
            error_page     415   = /empty;      # Handle error by /empty location
        }

        # 'y' size 300x300
        location /y/ {
            proxy_pass     http://yourimageserver;
            image_filter   resize  300 300;     # Resize photo 300x300
            error_page     415   = /empty;
        }

        # Original image
        location / {
            proxy_pass     http://yourimageserver; 
        }

        # Error handler
        location = /empty {
            empty_gif;          # Respond with empty image
        }
}

# Backend image server
server {
        listen       443;
        server_name  localhost;
        root /home/someuser/images;

        rewrite  ^/[zy]/(.*)$   /$1     last;
}

# Upstream
upstream yourimageserver {
    server localhost:444;
}

ここで、フォルダー「/home/youruser/images」に test.jpg という名前の画像がある場合、次のようにサーバーをテストできます。

localhost:444/example.jpg – shows the original image
localhost:444/z/example.jpg – will show version 150×150
localhost:444/y/example.jpg – show version 300×300

ポート 444 でサーバーを起動しました。これにより、さまざまなバージョンの画像がレンダリングされます。各バージョンには個別の場所ディレクティブがあります。興味深いのは image_filter ディレクティブです。 2 つのバージョンで使用しました:

image_filter resize A B – reduces the image proportionally to fit into the specified dimensions AhV
image_filter crop A B – reduces the image and cuts off the large e side at the edges so that the final size exactly matches AxB

ポート 443 でリッスンしているサーバーは、フォルダー「/home/someuser/images」から画像を出力し、サイズのプレフィックス (/ y / または / z /) がある場合は rewrite ディレクティブを使用してパスを書き換えます。サイズ変更エラーのイベントの場合、モジュールは処理可能な 415 エラーを返します。この例では、このようなエラーの場合、空の gif を表示します。