ปรับขนาดภาพได้ทันทีโดยใช้ 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-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

อาคารลัวะอิมาจิค

เราโคลนพื้นที่เก็บข้อมูล (หรือนำไฟล์ 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 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^ (คงอัตราส่วนภาพไว้ ใช้มิติที่ต่ำกว่า (ครอบตัด))
• กว้างxสูง! (ละเว้นอัตราส่วนภาพ)
• WxH+ (คงอัตราส่วนภาพ เพิ่มเส้นขอบด้านข้าง)

ตารางสรุปพร้อมผลลัพธ์การปรับขนาด

ขอพารามิเตอร์ uri
ขนาดภาพที่ส่งออก

?ปรับขนาด=400×200
200 × 200

?ปรับขนาด=400×200^
400 × 400

?ปรับขนาด=400×200!
400×200 (ไม่สัดส่วน)

?ปรับขนาด=400×200+
400×200 (ตามสัดส่วน)

ทั้งหมด

เมื่อพิจารณาถึงประสิทธิภาพและความเรียบง่ายของแนวทางนี้ คุณสามารถปรับใช้สิ่งต่าง ๆ ได้ด้วยตรรกะที่ค่อนข้างซับซ้อน เช่น การเพิ่มลายน้ำหรือดำเนินการอนุญาตด้วยการเข้าถึงที่จำกัด หากต้องการค้นหาความสามารถของ API ในการทำงานกับรูปภาพ คุณสามารถดูได้จากเอกสารประกอบของไลบรารี isage/lua-imagick

ที่มา: will.com