שנה את גודל התמונות תוך כדי שימוש באמצעות Nginx ו- LuaJIT (OpenResty)

כבר די הרבה זמן, בהשראת המאמר שנה את גודל התמונות תוך כדי תנועה שינוי גודל התמונה הוגדר באמצעות ngx_http_image_filter_module והכל עבד כמו שצריך. אבל בעיה אחת התעוררה כשהמנהל היה צריך לקבל תמונות במידות מדויקות להעלאה לשירותים מסוימים, כי... אלה היו הדרישות הטכניות שלהם. לדוגמה, אם יש לנו תמונה מקורית בגודל 1200 × 1200, וכאשר משנים גודל אנו כותבים משהו כמו ?שינוי גודל=600×400, אז נקבל תמונה מופחתת באופן פרופורציונלי לאורך הקצה הקטן ביותר, גודל 400 × 400. אי אפשר גם להשיג תמונה ברזולוציה גבוהה יותר (יוקרה). הָהֵן. ?שינוי גודל=1500×1500 יחזיר את אותה תמונה 1200 × 1200

המאמר הזה בא להציל OpenResty: הפיכת NGINX לשרת יישומים מלא להבין איך Nginx עובד עם Lua והספרייה עצמה עבור Lua isage/lua-imagegick - כריכות Lua pure-c ל-ImageMagick. מדוע נבחר הפתרון הזה, ולא, נניח, משהו בפיתון - כי הוא מהיר ונוח. אתה אפילו לא צריך ליצור קבצים, הכל בסדר בתצורת Nginx (אופציונלי).

אז מה אנחנו צריכים

דוגמאות יינתנו על סמך דביאן.

התקנת nginx ותוספות nginx

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.

אני אתן דוגמה לתצורה של מארח הקצה האחורי, שלמעשה אחראי לשינוי הגודל. הוא מוענק על ידי השרת הקדמי, גם עם Nginx, שם מתרחש שמירה במטמון לפרק זמן מסוים (ימים) ודברים אחרים.

תצורת nginx backend

# 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+ (שמור על יחס רוחב-גובה, הוסף גבולות צדדיים)

טבלת סיכום עם תוצאות שינוי גודל

בקש פרמטר Uri
גודל תמונת פלט

?שינוי גודל=400×200
200 × 200

?שינוי גודל=400×200^
400 × 400

?שינוי גודל=400×200!
400×200 (לא פרופורציונלי)

?שינוי גודל=400×200+
400×200 (פרופורציונלי)

סך הכל

בהתחשב בעוצמה ובפשטות של גישה זו, אתה יכול ליישם דברים עם היגיון מורכב למדי, למשל, הוספת סימני מים או יישום הרשאות עם גישה מוגבלת. על מנת לברר את יכולות ה-API לעבודה עם תמונות, ניתן לעיין בתיעוד הספרייה isage/lua-imagegick

מקור: www.habr.com