🥇Nginx və LuaJIT (OpenResty) istifadə edərək görüntülərin anında ölçüsünü dəyişdirmək

Artıq kifayət qədər əvvəldən, bir məqalədən ilhamlanaraq Şəkillərin onlayn ölçüsünü dəyişdirmək şəkillərin ölçüsünü dəyişdirmək üçün tənzimləmə edildi ngx_http_image_filter_module və hər şey lazım olduğu kimi işləyirdi. Lakin menecerin dəqiq ölçülərdə şəkillər əldə etməsi lazım olduğu bir problem yarandı, çünki bu, onların texniki tələbləri idi. Məsələn, əgər bizdə ölçüsü 1200×1200, və ölçüləri dəyişdirdikdə belə bir şey yazsaq ?resize=600×400, o zaman ən kiçik tərəfdən nisbətən kiçildilmiş ölçüsü 400×400alacağıq. Həmçinin daha böyük bir həcmli şəkil almaq (upscale) mümkün deyil. Yəni ?resize=1500×1500 eyni şəkili geri qaytaracaq 1200×1200

Bu məsələyə kömək edən məqalə OpenResty: NGINX-i tam işlək tətbiq serverinə çevirmək Nginx ilə Lua'nın necə işlədiyini başa düşmək və Lua üçün kitabxana isage/lua-imagick - Lua üçün ImageMagick ilə saf-c bağlanmalar. Niyə belə bir həll seçildi, əvəzinə desək, nə isə python istifadə etmək – çünki bu sürətli və rahatdır. Hətta heç bir fayl yaratmaq lazım deyil, hər şey Nginx konfiqurasiyasında (şərti) birbaşa aparılır.

Beləliklə, nə lazım olacaq

Nümunələr Debian əsasında veriləcək.

nginx və nginx-extras quraşdırılması

apt-get update
apt-get install nginx-extras

LuaJIT-in quraşdırılması

apt-get -y install lua5.1 luajit-5.1 libluajit-5.1-dev

imagemagick-in quraşdırılması

apt-get -y install imagemagick

və kitabxanası magickwand ona, mənim vəziyyətimdə 6 versiyası üçün

apt-cache search libmagickwand
apt-get -y install libmagickwand-6.q16-3 libmagickwand-6.q16-dev

lua-imagick-in yığılması

Repository-i klonlayırıq (ya zipini alırıq və açırıq)

cd ~
git clone https://github.com/isage/lua-imagick.git
cd lua-imagick
mkdir build
cd build
cmake ..
make
make install

Hər şey uğurla keçibsə, Nginx-i konfiqurasiya edə bilərik.

Sözsüz ki, ölçüləri dəyişməyi görəcək backend serverin konfiqurasiyasını təqdim edəcəyəm. O, Nginx ilə ön server tərəfindən proxy-ləşdirilir, burada bir müddət (bir gün) üçün keşikdir və s. işlər baş verir.

nginx backend konfiqurasiyası

# Backend image server
server {
    listen       8082;
    listen [::]:8082;
    set $files_root /var/www/example.lh/frontend/web;
    root $files_root;
    access_log off;
    expires 1d;

    location /files {
        # дефолтные значения ресайза
        set $w 700;
        set $h 700;
        set $q 89;

        #1-89 allowed
        if ($arg_q ~ "^([1-9]|[1-8][0-9])$") {
            set $q $arg_q;
        }

        if ($arg_resize ~ "([d-]+)x([d+!^]+)") {  
            set $w $1;
            set $h $2;
            rewrite  ^(.*)$   /resize/$w/$h/$q$uri     last;
        }

        rewrite  ^(.*)$   /resize/$w/$h/$q$uri     last;
    }

    location ~* ^/resize/([d]+)/([d+!^]+)/([d]+)/files/(.+)$ {
        default_type 'text/plain';

        set $w $1;
        set $h $2;
        set $q $3;
        set $fname $4;

        # Есть возможность вынести весь Lua код в отдельный файл
        # content_by_lua_file /var/www/some.lua;
        # lua_code_cache off; #dev
        content_by_lua '
        local magick = require "imagick"
        local img = magick.open(ngx.var.files_root .. "/files/" .. ngx.var.fname)
        if not img then ngx.exit(ngx.HTTP_NOT_FOUND) end
        img:set_gravity(magick.gravity["CenterGravity"])

        if string.match(ngx.var.h, "%d+%+") then
            local h = string.gsub(ngx.var.h, "(%+)", "")
            resize = ngx.var.w .. "x" .. h
            -- для png с альфа каналом
            img:set_bg_color(img:has_alphachannel() and "none" or img:get_bg_color())
            img:smart_resize(resize)
            img:extent(ngx.var.w, h)
        else
                img:smart_resize(ngx.var.w .. "x" .. ngx.var.h)
        end

        if ngx.var.arg_q then img:set_quality(ngx.var.q) end

        ngx.say(img:blob())
        ';
    }
}

# Upstream
upstream imageserver {
    server localhost:8082;
}

server {
    listen 80;
    server_name examaple.lh;

    # отправляем все jpg и png картинки на imageserver
    location ~* ^/files/.+.(jpg|png) {
        proxy_buffers 8 2m;
        proxy_buffer_size 10m;
        proxy_busy_buffers_size 10m;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_pass     http://imageserver;  # Backend image server
    }
}

Tələb olunan şey (şəkilin kənarlarının genişlənməsi) aşağıdakı yolu ilə baş verir img:extent() və aşağıdakı parametr vasitəsilə müəyyən edilir resize sonunda. + Aşağıdakı parametrlər mövcuddur:

WxH (Nisbəti qorumaq, daha yüksək ölçüdən istifadə et)

WxH^ (Nisbəti qorumaq, daha aşağı ölçüdən istifadə et (crop))
WxH! (Nisbəti göz ardı et)
WxH+ (Nisbəti qorumaq, yan sərhədləri əlavə et)
Resizing nəticələrinin cədvəli

Request-in uri parametresi

Çıxış şəkilinin ölçüsü
400×200 (Proprorsional deyil)

?resize=400×200
200×200

?resize=400×200^
400×400

?resize=400×200!
400×200 (Proprorsional)

?resize=400×200+
Bütün gücü və bu yanaşmanın sadəliyi ilə, mürəkkəb məntiqə malik şeyləri həyata keçirmək mümkündür, məsələn, watermark əlavə etmək və ya sərhədli giriş həyata keçirmək. Şəkillərlə işləmək üçün API imkanlarını öyrənmək üçün kitabxananın sənədləşməsinə baxa bilərsiniz.