Bildvorschau mit ngx_http_image_filter_module

Auf Multimedia-Seiten besteht häufig die Aufgabe, Bilder in verschiedenen Größen (Thumbnails) anzuzeigen. Außerdem müssen Sie in den meisten Fällen mehrere dimensionale Versionen der Bilder unterstützen.

Heute beschreiben wir ein Modul mit dem Namen „ngx_http_image_filter_module“. Mit diesem Modul können Sie das Problem der Größenänderung von Bildern direkt über einen Webserver (ohne zusätzliche Links) lösen. Wie sieht das alles aus und was ist zu tun?

Installation

Laden Sie die neueste Version hier herunter:http://sysoev.ru/nginx/download.html

Um zu beginnen, müssen Sie libgd installieren:

# sudo apt-get install libgd2-xpm-dev

Standardmäßig wird das von uns benötigte Modul nicht erstellt, daher muss es in der Konfigurationsphase der nginx-Installation verbunden werden:

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

Serverkonfiguration

Jetzt konfigurieren wir einen virtuellen Host in Nginx für die Bildverarbeitung. Lassen Sie die Bilder im Verzeichnis „/home/someuser/images“ speichern und wir möchten zweidimensionale Versionen + das Original zeigen. Die Regeln lauten wie folgt:

Wenn Sie eine Suchanfrage wie „example.com/z/“ stellen, zeigen wir eine 150 × 150-Version, die an den Rändern beschnitten ist (d. h. immer quadratisch)

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

Tatsächliche Konfiguration:

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

Wenn wir nun ein Bild namens test.jpg im Ordner „/home/youruser/images“ haben, dann können wir den Server wie folgt testen:

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

Wir haben den Server auf Port 444 hochgefahren, der verschiedene Versionen der Bilder rendert. Jede Version hat eine separate Standortrichtlinie. Was uns interessiert, ist die image_filter-Direktive. Wir haben es in zwei Versionen verwendet:

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

Der auf Port 443 lauschende Server gibt Bilder aus dem Ordner „/home/someuser/images“ aus und schreibt den Pfad um, falls ein Größenpräfix (/ y / oder / z /) vorhanden ist, indem er die rewrite-Direktive verwendet. Bei einem Größenänderungsfehler gibt das Modul einen 415-Fehler aus, der verarbeitet werden kann. In unserem Beispiel zeigen wir im Falle eines solchen Fehlers ein leeres gif.