Aperçu des images avec ngx_http_image_filter

Souvent, sur les sites multimédias, il y a la tâche d'afficher des images de différentes tailles (vignettes). De plus, dans la plupart des cas, vous devez prendre en charge plusieurs versions dimensionnelles des images.

Aujourd'hui, nous allons décrire un module avec le nom "ngx_http_image_filter_module". Ce module vous permet de résoudre le problème de redimensionnement des images directement via un serveur Web (sans liens supplémentaires). À quoi tout cela ressemble-t-il et que faut-il faire ?

Installation

Téléchargez la dernière version ici :http://sysoev.ru/nginx/download.html

Pour commencer, vous devez installer libgd :

# sudo apt-get install libgd2-xpm-dev

Par défaut, le module dont nous avons besoin ne va pas être construit, il doit donc être connecté à l'étape de configuration de l'installation de nginx :

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

Configuration du serveur

Nous configurons maintenant un hôte virtuel dans Nginx pour le traitement des images. Laissez les images être stockées dans le répertoire "/home/someuser/images" et nous voulons montrer des versions en deux dimensions + l'original. Les règles sont les suivantes :

Lorsque vous effectuez une requête telle que "example.com/z/", nous affichons une version 150 × 150 recadrée sur les bords (c'est-à-dire toujours carrée)

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

Configuration actuelle :

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

Maintenant, si nous avons une image appelée test.jpg dans le dossier "/home/youruser/images", alors nous pouvons tester le serveur comme suit :

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

Nous avons élevé le serveur sur le port 444, qui rend différentes versions des images. Chaque version a une directive d'emplacement distincte. Ce qui nous intéresse, c'est la directive image_filter. Nous l'avons utilisé en deux versions :

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

Le serveur écoutant sur le port 443 sort les images du dossier « /home/someuser/images », et réécrit le chemin s'il y a un préfixe de taille (/y/ ou /z/) en utilisant la directive rewrite. En cas d'erreur de redimensionnement, le module donne une erreur 415 qui peut être traitée. Dans notre exemple, en cas d'une telle erreur, nous affichons un gif vide.

Aperçu des images avec ngx_http_image_filter_module

Installation

Configuration du serveur