🥇On-the-fly beeld grootte verander met behulp van Nginx en LuaJIT (OpenResty)

Vir 'n geruime tyd nou, geïnspireer deur die artikel Verander die grootte van die beeld op die vlug beeldgrootte is gekonfigureer met behulp van ngx_http_image_filter_module en alles het gewerk soos dit moes. Maar een probleem het ontstaan toe die bestuurder beelde met presiese afmetings moes ontvang om na sommige dienste op te laai, want... dit was hul tegniese vereistes. Byvoorbeeld, as ons 'n oorspronklike beeld van grootte het 1200 × 1200, en wanneer ons die grootte verander skryf ons iets soos ?verander grootte=600×400, dan kry ons 'n proporsioneel verkleinde beeld langs die kleinste rand, grootte 400 × 400. Dit is ook onmoontlik om 'n beeld met 'n hoër resolusie (opskaal) te verkry. Dié. ?verander grootte=1500×1500 sal dieselfde beeld terugstuur 1200 × 1200

Hierdie artikel het tot die redding gekom OpenResty: verander NGINX in 'n volwaardige toepassingsbediener om te verstaan hoe Nginx met Lua en die biblioteek self vir Lua werk isage/lua-imagegick - Lua pure-c bindings aan ImageMagick. Hoekom is hierdie oplossing gekies, en nie, sê, iets in luislang nie - want dit is vinnig en gerieflik. Jy hoef nie eers enige lêers te skep nie, alles is reg in die Nginx-konfigurasie (opsioneel).

So wat het ons nodig

Voorbeelde sal gegee word gebaseer op Debian.

Installeer nginx en nginx-ekstras

apt-get update
apt-get install nginx-extras

Installeer LuaJIT

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

Installeer imagemagick

apt-get -y install imagemagick

en biblioteke towerstaf daaraan, in my geval vir weergawe 6

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

Bou lua-imaging

Ons kloon die bewaarplek (of neem die zip en pak dit uit)

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

As alles goed gegaan het, kan jy Nginx instel.

Ek sal 'n voorbeeld gee van die konfigurasie van die backend-gasheer, wat in werklikheid verantwoordelik is vir die verandering van grootte. Dit word gevolmagtig deur die voorste bediener, ook met Nginx, waar caching plaasvind vir 'n sekere tydperk (dae) en ander dinge.

nginx backend config

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

Wat nodig was (die uitbrei van die beeld om die kante) gebeur met behulp van img:extent() en word gedefinieer met behulp van die parameter resize met 'n teken + aan die einde.

Die volgende opsies is beskikbaar:

BxH (Behou aspekverhouding, gebruik hoër dimensie)
BxH^ (Behou aspekverhouding, gebruik laer dimensie (sny))
WxH! (Ignoreer aspekverhouding)
BxH+ (Behou aspekverhouding, voeg sygrense by)

Opsommingstabel met resize resultate

Versoek uri-parameter
Uitsetbeeldgrootte

?verander grootte=400×200
200 × 200

?verander grootte=400×200^
400 × 400

?verander grootte=400×200!
400×200 (Nie proporsioneel nie)

?verander grootte=400×200+
400×200 (proporsioneel)

Totale

As u die krag en eenvoud van hierdie benadering in ag neem, kan u dinge met redelik komplekse logika implementeer, byvoorbeeld die byvoeging van watermerke of die implementering van magtiging met beperkte toegang. Om die vermoëns van die API uit te vind om met beelde te werk, kan u na die biblioteekdokumentasie verwys isage/lua-imagegick

Bron: will.com

Verander die grootte van prente met behulp van Nginx en LuaJIT (OpenResty)