🥇On-the-fly duab resize siv Nginx thiab LuaJIT (OpenResty)

Rau qee lub sijhawm tam sim no, tau tshoov siab los ntawm kab lus Resize cov duab ntawm ya duab resize tau configured siv ngx_http_image_filter_module thiab txhua yam ua haujlwm raws li nws yuav tsum tau ua. Tab sis ib qho teeb meem tshwm sim thaum tus thawj tswj xav tau txais cov duab uas muaj qhov ntev rau kev xa mus rau qee qhov kev pabcuam, vim tias ... cov no yog lawv cov kev cai. Piv txwv li, yog tias peb muaj cov duab qub ntawm qhov loj me 1200 × 1200, thiab thaum resizing peb sau ib yam dab tsi zoo li Luas = 600 × 400, ces peb tau ib tug proportionally txo cov duab raws tus me tshaj ntug, loj 400 × 400. Nws tseem tsis tuaj yeem tau txais ib daim duab nrog kev daws teeb meem siab dua (upscale). Cov. Luas = 1500 × 1500 yuav rov zoo li qub 1200 × 1200

Kab lus no tuaj cawm OpenResty: tig NGINX rau hauv daim ntawv thov kev pabcuam puv npo kom nkag siab tias Nginx ua haujlwm li cas nrog Lua thiab lub tsev qiv ntawv nws tus kheej rau Lua isage/lua-imagick - Lua ntshiab-c khi rau ImageMagick. Vim li cas qhov kev daws teeb meem no tau xaiv, thiab tsis hais, ib yam dab tsi hauv python - vim nws ceev thiab yooj yim. Koj tsis tas yuav tsim cov ntaub ntawv, txhua yam yog nyob rau hauv Nginx config (optional).

Yog li peb xav tau dab tsi

Piv txwv yuav muab raws li Debian.

Txhim kho nginx thiab nginx-extras

apt-get update
apt-get install nginx-extras

Install LuaJIT

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

Txhim kho imagemagick

apt-get -y install imagemagick

thiab tsev qiv ntawv khawv koob rau nws, hauv kuv rooj plaub rau version 6

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

Building lua-imagick

Peb clone lub repository (los yog nqa lub zip thiab unpack nws)

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

Yog tias txhua yam mus zoo, koj tuaj yeem teeb tsa Nginx.

Kuv yuav muab piv txwv ntawm config ntawm lub backend host, uas, qhov tseeb, yog lub luag hauj lwm rau resizing. Nws yog proxied los ntawm tus neeg rau zaub mov pem hauv ntej, kuj nrog Nginx, qhov chaw caching tshwm sim rau ib lub sijhawm (hnub) thiab lwm yam.

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

Dab tsi yog qhov yuav tsum tau ( nthuav cov duab nyob ib ncig ntawm cov npoo) tshwm sim siv img:extent() thiab txhais tau tias siv cov parameter resize nrog ib lub cim + thaum kawg.

Cov kev xaiv hauv qab no muaj:

WxH (Ua kom pom qhov sib piv, siv qhov loj dua)
WxH^ (Keep aspect-ratio, siv qis dimension (crop))
WxH! (Tsis quav ntsej nam piv)
WxH + (Keep aspect-ratio, ntxiv sab ciam teb)

Summary table nrog resize tau

Thov koj parameter
Tso zis duab loj

Luas = 400 × 200
200 × 200

luas = 400 x 200^
400 × 400

Luas = 400 x 200
400 × 200 (tsis proportional)

Luas = 400 × 200 +
400 × 200 (Qhov sib npaug)

Qhov no

Xav txog lub zog thiab qhov yooj yim ntawm txoj hauv kev no, koj tuaj yeem siv cov khoom nrog cov logic nyuaj, piv txwv li, ntxiv watermarks lossis siv kev tso cai nrog kev txwv tsis pub nkag. Txhawm rau kom paub qhov muaj peev xwm ntawm API rau kev ua haujlwm nrog cov duab, koj tuaj yeem xa mus rau cov ntaub ntawv hauv tsev qiv ntawv isage/lua-imagick

Tau qhov twg los: www.hab.com

Resize cov duab ntawm ya siv Nginx thiab LuaJIT (OpenResty)