Anteprima delle immagini con ngx_http_image_filter_module

Spesso nei siti multimediali c'è il compito di visualizzare immagini di varie dimensioni (miniature). Inoltre, nella maggior parte dei casi, devi supportare diverse versioni dimensionali delle immagini.

Oggi descriveremo un modulo con il nome “ngx_http_image_filter_module”. Questo modulo permette di risolvere il problema del ridimensionamento delle immagini direttamente tramite un server Web (senza collegamenti aggiuntivi). Com'è tutto e cosa è necessario fare?

Installazione

Scarica l'ultima versione qui:http://sysoev.ru/nginx/download.html

Per iniziare, devi installare libgd:

# sudo apt-get install libgd2-xpm-dev

Per impostazione predefinita, il modulo di cui abbiamo bisogno non verrà compilato, quindi deve essere collegato nella fase di configurazione dell'installazione di nginx:

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

Configurazione del server

Ora configuriamo un host virtuale in Nginx per l'elaborazione delle immagini. Lascia che le immagini siano memorizzate nella directory "/home/someuser/images" e vogliamo mostrare le versioni bidimensionali + l'originale. Le regole sono le seguenti:

Quando esegui query come "example.com/z/", mostreremo una versione 150×150 ritagliata attorno ai bordi (cioè sempre quadrata)

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

In realtà configurazione:

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

Ora, se abbiamo un'immagine chiamata test.jpg nella cartella "/home/youruser/images", possiamo testare il server come segue:

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

Abbiamo sollevato il server sulla porta 444, che rende diverse versioni delle immagini. Ogni versione ha una direttiva di posizione separata. Ciò che ci interessa è la direttiva image_filter. L'abbiamo usato in due versioni:

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

Il server in ascolto sulla porta 443 emette le immagini dalla cartella "/home/someuser/images" e riscrive il percorso se è presente un prefisso di dimensione (/ y / o / z /) utilizzando la direttiva di riscrittura. In caso di errore di ridimensionamento, il modulo fornisce un errore 415 che può essere elaborato. Nel nostro esempio, in caso di tale errore, mostriamo una gif vuota.