Pratinjau gambar dengan ngx_http_image_filter_module

Seringkali di situs multimedia, ada tugas menampilkan gambar dalam berbagai ukuran (thumbnail). Selain itu, dalam banyak kasus, Anda harus mendukung beberapa versi gambar dimensi.

Hari ini, Kami akan menjelaskan sebuah modul dengan nama “ngx_http_image_filter_module”. Modul ini memungkinkan Anda untuk memecahkan masalah mengubah ukuran gambar secara langsung melalui server Web (tanpa tautan tambahan). Seperti apa semuanya, dan apa yang perlu dilakukan?

Pemasangan

Unduh versi terbaru di sini:http://sysoev.ru/nginx/download.html

Untuk memulai, Anda perlu menginstal libgd:

# sudo apt-get install libgd2-xpm-dev

Secara default, modul yang kita butuhkan tidak akan dibangun, sehingga harus terhubung pada tahap konfigurasi instalasi nginx:

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

Konfigurasi server

Sekarang kami mengkonfigurasi host virtual di Nginx untuk pemrosesan gambar. Biarkan gambar disimpan di direktori "/home/someuser/images" dan kami ingin menampilkan versi dua dimensi + aslinya. Aturannya adalah sebagai berikut:

Saat Anda menanyakan seperti “example.com/z/”, kami akan menampilkan versi 150×150 yang dipangkas di sekitar tepinya (yaitu selalu persegi)

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

Sebenarnya konfigurasi:

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

Sekarang, jika kita memiliki gambar bernama test.jpg di folder “/home/youruser/images”, maka kita dapat menguji server sebagai berikut:

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

Kami meningkatkan server pada port 444, yang membuat versi gambar yang berbeda. Setiap versi memiliki arahan lokasi terpisah. Yang menarik bagi kami adalah direktif image_filter. Kami menggunakannya dalam dua versi:

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 yang mendengarkan pada port 443 mengeluarkan gambar dari folder "/home/someuser/images", dan menulis ulang jalur jika ada awalan ukuran (/ y / atau / z /) menggunakan direktif penulisan ulang. Jika terjadi kesalahan pengubahan ukuran, modul memberikan kesalahan 415 yang dapat diproses. Dalam contoh kami, jika terjadi kesalahan seperti itu, kami menampilkan gif kosong.