Náhled obrázků pomocí modulu ngx_http_image_filter_module

Na multimediálních stránkách je často úkolem zobrazovat obrázky v různých velikostech (miniatury). Navíc ve většině případů musíte podporovat několik rozměrných verzí obrázků.

Dnes si popíšeme modul s názvem „ngx_http_image_filter_module“. Tento modul umožňuje vyřešit problém změny velikosti obrázků přímo přes webový server (bez dalších odkazů). Jak to všechno vypadá a co je třeba udělat?

Instalace

Stáhněte si nejnovější verzi zde:http://sysoev.ru/nginx/download.html

Chcete-li začít, musíte nainstalovat libgd:

# sudo apt-get install libgd2-xpm-dev

Ve výchozím nastavení se modul, který potřebujeme, nebude sestavovat, takže musí být připojen ve fázi konfigurace instalace nginx:

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

Konfigurace serveru

Nyní nakonfigurujeme virtuálního hostitele v Nginx pro zpracování obrazu. Necháme obrázky uložit do adresáře „/home/someuser/images“ a chceme zobrazit dvourozměrné verze + originál. Pravidla jsou následující:

Když zadáte dotaz jako „example.com/z/“, zobrazíme verzi 150×150 oříznutou kolem okrajů (tj. vždy čtvercovou)

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

Ve skutečnosti konfigurace:

# 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;
}

Nyní, pokud máme ve složce „/home/youruser/images“ obrázek s názvem test.jpg, můžeme server otestovat následovně:

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

Zvedli jsme server na portu 444, který vykresluje různé verze obrázků. Každá verze má samostatnou direktivu umístění. Co nás zajímá, je direktiva image_filter. Použili jsme jej ve dvou verzích:

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

Server naslouchající na portu 443 odešle obrázky ze složky „/home/someuser/images“ a přepíše cestu, pokud existuje předpona velikosti (/ y / nebo / z /) pomocí direktivy rewrite. Pokud dojde k chybě změny velikosti, modul zobrazí chybu 415, kterou lze zpracovat. V našem příkladu v případě takové chyby ukážeme prázdný gif.