ផ្លាស់ប្តូរទំហំរូបភាពភ្លាមៗដោយប្រើ Nginx និង LuaJIT (OpenResty)

មួយរយៈនេះ បំផុសគំនិតដោយអត្ថបទ ផ្លាស់ប្តូរទំហំរូបភាពភ្លាមៗ ការផ្លាស់ប្តូរទំហំរូបភាពត្រូវបានកំណត់រចនាសម្ព័ន្ធដោយប្រើ ngx_http_image_filter_module ហើយអ្វីៗដំណើរការដូចដែលវាគួរតែ។ ប៉ុន្តែបញ្ហាមួយបានកើតឡើងនៅពេលដែលអ្នកគ្រប់គ្រងត្រូវការទទួលរូបភាពដែលមានវិមាត្រពិតប្រាកដសម្រាប់ការបង្ហោះទៅកាន់សេវាកម្មមួយចំនួន ដោយសារតែ... ទាំងនេះគឺជាតម្រូវការបច្ចេកទេសរបស់ពួកគេ។ ឧទាហរណ៍ប្រសិនបើយើងមានរូបភាពដើមនៃទំហំ 1200 × 1200ហើយនៅពេលប្តូរទំហំយើងសរសេរអ្វីមួយដូចជា ?resize=600×400បន្ទាប់មកយើងទទួលបានរូបភាពកាត់បន្ថយសមាមាត្រតាមគែមតូចបំផុត ទំហំ 400 × 400. វាក៏មិនអាចទៅរួចទេក្នុងការទទួលបានរូបភាពដែលមានគុណភាពបង្ហាញខ្ពស់ (ធំជាង)។ ទាំងនោះ។ ?resize=1500×1500 នឹងត្រឡប់រូបភាពដដែល 1200 × 1200

អត្ថបទនេះបានមកជួយសង្គ្រោះ OpenResty៖ ប្រែក្លាយ NGINX ទៅជាម៉ាស៊ីនមេកម្មវិធីពេញលេញ ដើម្បីយល់ពីរបៀបដែល Nginx ធ្វើការជាមួយ Lua និងបណ្ណាល័យខ្លួនឯងសម្រាប់ Lua isage/lua-imagick - Lua pure-c ចងភ្ជាប់ជាមួយ ImageMagick ។ ហេតុអ្វីបានជាដំណោះស្រាយនេះត្រូវបានជ្រើសរើស និងមិននិយាយថាអ្វីមួយនៅក្នុង python ព្រោះវាលឿន និងងាយស្រួល។ អ្នកមិនចាំបាច់បង្កើតឯកសារណាមួយទេ អ្វីគ្រប់យ៉ាងគឺត្រឹមត្រូវនៅក្នុងការកំណត់រចនាសម្ព័ន្ធ Nginx (ស្រេចចិត្ត)។

ដូច្នេះតើយើងត្រូវការអ្វីខ្លះ

ឧទាហរណ៍នឹងត្រូវបានផ្តល់ឱ្យដោយផ្អែកលើ Debian ។

ការដំឡើង nginx និង nginx-extras

apt-get update
apt-get install nginx-extras

ការដំឡើង LuaJIT

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

ការដំឡើង imagemagick

apt-get -y install imagemagick

និងបណ្ណាល័យ វេទមន្ត ទៅវា ក្នុងករណីរបស់ខ្ញុំសម្រាប់កំណែ 6

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

ការកសាង lua-imagick

យើងក្លូនឃ្លាំង (ឬយក zip ហើយស្រាយវា)

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

ប្រសិនបើអ្វីៗដំណើរការល្អ អ្នកអាចកំណត់រចនាសម្ព័ន្ធ Nginx ។

ខ្ញុំនឹងផ្តល់ឧទាហរណ៍នៃ config នៃ backend host ដែលតាមពិតទៅគឺទទួលខុសត្រូវចំពោះការផ្លាស់ប្តូរទំហំ។ វាត្រូវបានប្រូកស៊ីដោយម៉ាស៊ីនមេខាងមុខ ក៏ដូចជា Nginx ផងដែរ ដែលឃ្លាំងសម្ងាត់កើតឡើងក្នុងរយៈពេលជាក់លាក់មួយ (ថ្ងៃ) និងអ្វីៗផ្សេងទៀត។

ការកំណត់រចនាសម្ព័ន្ធផ្នែកខាងក្រោយ nginx

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

អ្វីដែលត្រូវបានទាមទារ (ពង្រីករូបភាពជុំវិញគែម) កើតឡើងដោយប្រើ img:extent() និងត្រូវបានកំណត់ដោយប្រើប៉ារ៉ាម៉ែត្រ resize ជាមួយនឹងសញ្ញាមួយ។ + នៅ​ចុង​បញ្ចប់។

ជម្រើសខាងក្រោមអាចប្រើបាន៖

• WxH (រក្សាសមាមាត្រទិដ្ឋភាព ប្រើវិមាត្រខ្ពស់ជាង)
• WxH^ (រក្សាសមាមាត្រ ប្រើវិមាត្រទាប (ច្រឹប))
• WxH! (មិនអើពើសមាមាត្រ)
• WxH+ (រក្សាសមាមាត្រទិដ្ឋភាព បន្ថែមស៊ុមចំហៀង)

តារាងសង្ខេបជាមួយនឹងលទ្ធផលផ្លាស់ប្តូរទំហំ

ស្នើសុំប៉ារ៉ាម៉ែត្រ
បញ្ចេញទំហំរូបភាព

?resize=400×200
200 × 200

?resize=400×200^
400 × 400

?resize=400×200!
400 × 200 (មិនសមាមាត្រ)

?resize=400×200+
400 × 200 (សមាមាត្រ)

លទ្ធផល

ដោយពិចារណាលើថាមពល និងភាពសាមញ្ញនៃវិធីសាស្រ្តនេះ អ្នកអាចអនុវត្តអ្វីៗជាមួយនឹងតក្កវិជ្ជាដ៏ស្មុគស្មាញ ឧទាហរណ៍ ការបន្ថែមការសម្គាល់ទឹក ឬការអនុវត្តការអនុញ្ញាតជាមួយនឹងការចូលប្រើប្រាស់មានកំណត់។ ដើម្បីស្វែងយល់ពីសមត្ថភាពរបស់ API សម្រាប់ធ្វើការជាមួយរូបភាព អ្នកអាចយោងទៅឯកសារបណ្ណាល័យ isage/lua-imagick

ប្រភព: www.habr.com