Vista previa de imágenes con ngx_http_image_filter_module

A menudo, en los sitios multimedia, existe la tarea de mostrar imágenes en varios tamaños (miniaturas). Además, en la mayoría de los casos, debe admitir varias versiones dimensionales de las imágenes.

Hoy, describiremos un módulo con el nombre "ngx_http_image_filter_module". Este módulo le permite resolver el problema de cambiar el tamaño de las imágenes directamente a través de un servidor web (sin enlaces adicionales). ¿Cómo se ve todo y qué se debe hacer?

Instalación

Descargue la última versión aquí:http://sysoev.ru/nginx/download.html

Para comenzar, debe instalar libgd:

# sudo apt-get install libgd2-xpm-dev

De forma predeterminada, el módulo que necesitamos no se construirá, por lo que debe conectarse en la etapa de configuración de la instalación de nginx:

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

Configuración del servidor

Ahora configuramos un host virtual en Nginx para el procesamiento de imágenes. Deje que las imágenes se almacenen en el directorio "/home/someuser/images" y queremos mostrar versiones bidimensionales + el original. Las reglas son las siguientes:

Cuando consulta como "example.com/z/", mostraremos una versión de 150 × 150 recortada en los bordes (es decir, siempre cuadrada)

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

En realidad configuración:

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

Ahora, si tenemos una imagen llamada test.jpg en la carpeta "/home/youruser/images", entonces podemos probar el servidor de la siguiente manera:

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

Levantamos el servidor en el puerto 444, que genera diferentes versiones de las imágenes. Cada versión tiene una directiva de ubicación separada. Lo que nos interesa es la directiva image_filter. Lo usamos en dos versiones:

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

El servidor que escucha en el puerto 443 genera imágenes de la carpeta "/home/someuser/images" y reescribe la ruta si hay un prefijo de tamaño (/ y / o / z /) usando la directiva de reescritura. Si se produce un error de cambio de tamaño, el módulo da un error 415 que se puede procesar. En nuestro ejemplo, en caso de tal error, mostramos un gif vacío.