🥇On-the-fly Bildgréisst änneren mat Nginx a LuaJIT (OpenResty)

Zënter enger laanger Zäit, inspiréiert vum Artikel Bild änneren op der fléien Bildgréisst gouf konfiguréiert mat ngx_http_image_filter_module an alles huet geschafft wéi et soll. Awer ee Problem ass entstanen wann de Manager Biller mat genauen Dimensiounen fir Eroplueden op e puer Servicer muss kréien, well ... dat waren hir technesch Ufuerderungen. Zum Beispill, wa mir en original Bild vun der Gréisst hunn 1200 × 1200, a wa mir d'Gréisst änneren schreiwen mir eppes wéi ? Gréisst = 600 × 400, da kréie mir e proportional reduzéiert Bild laanscht de klengste Rand, Gréisst 400 × 400. Et ass och onméiglech e Bild mat enger méi héijer Opléisung ze kréien (upscale). Déi. ? Gréisst = 1500 × 1500 wäert déi selwecht Bild zréck 1200 × 1200

Dësen Artikel koum zur Rettung OpenResty: NGINX an e vollwäertege Applikatiounsserver maachen fir ze verstoen wéi Nginx mat Lua an der Bibliothéik selwer fir Lua funktionnéiert isage/lua-imaging - Lua pure-c Bindungen op ImageMagick. Firwat gouf dës Léisung gewielt, an net, soen, eppes am Python - well et ass séier a praktesch. Dir braucht net emol Dateien ze kreéieren, alles ass richteg an der Nginx Konfiguratioun (optional).

Also wat brauche mir

Beispiller ginn op Debian baséiert.

Installéiere vun nginx an nginx-Extras

apt-get update
apt-get install nginx-extras

LuaJIT installéieren

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

Installatioun vun imagemagick

apt-get -y install imagemagick

a Bibliothéiken Zauberwand derzou, a mengem Fall fir Versioun 6

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

Lua-Imagie bauen

Mir klonen de Repository (oder huelen den Zip an packen et)

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

Wann alles gutt gaang ass, kënnt Dir Nginx konfiguréieren.

Ech ginn e Beispill vun der Configuratioun vum Backend Host, deen tatsächlech verantwortlech ass fir d'Gréisst änneren. Et gëtt vum Frontserver geproxéiert, och mam Nginx, wou Cache fir eng gewëssen Zäit (Deeg) an aner Saachen geschitt.

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 néideg war (d'Bild ëm d'Kante ausbauen) geschitt mat img:extent() a gëtt definéiert mam Parameter resize mat engem Schëld + um Enn.

Déi folgend Optiounen sinn verfügbar:

WxH (Aspektverhältnis behalen, méi héich Dimensioun benotzen)
WxH^ (Aspektverhältnis behalen, manner Dimensioun benotzen (crop))
WxH! (Ignoréieren Aspekt Verhältnis)
WxH+ (Behalen Aspektverhältnis, Säit Grenzen derbäi)

Zesummefaassung Dësch mat Resize Resultater

Uri Parameter ufroen
Ausgangsbildgréisst

? Gréisst = 400 × 200
200 × 200

Gréisst = 400 × 200 ^
400 × 400

? Gréisst = 400 × 200!
400 × 200 (net proportional)

? Gréisst = 400 × 200+
400 × 200 (Proportional)

D 'Resultat

Wann Dir d'Kraaft an d'Einfachheet vun dëser Approche berücksichtegt, kënnt Dir Saache mat zimlech komplexer Logik ëmsetzen, zum Beispill Waasserzeechen derbäisetzen oder Autorisatioun mat limitéierten Zougang ëmsetzen. Fir d'Fäegkeeten vun der API fir mat Biller ze schaffen erauszefannen, kënnt Dir op d'Bibliothéikdokumentatioun referenzéieren isage/lua-imaging

Source: will.com

Ännert d'Gréisst vun Biller op der Flucht mat Nginx a LuaJIT (OpenResty)