Ресайз изображений на лету с помощью Nginx и LuaJIT (OpenResty)

Уже давольно давно, вдохновившись статьей Ресайз изображений на лету был настроен ресайз изображений с помощью ngx_http_image_filter_module и все работало как надо. Но появилась одна проблема, когда менеджеру понадобилось получать изображения с точными размерами для заливки на некоторые сервисы, т.к. это были их технические требования. К примеру, если мы имеем оригинал изображения размером 1200×1200, и при ресайзе мы пишем что-то вроде ?resize=600×400, то получим пропорционально уменьшенное изображение по наименьшему краю, размером 400×400. Так же невозможно получить изображение с бОльшим разрешением (upscale). Т.е. ?resize=1500×1500 вернет все тоже изображение 1200×1200

На помощь пришла статья OpenResty: превращаем NGINX в полноценный сервер приложений для понимания как работает Nginx с Lua и сама библиотека для Lua isage/lua-imagick — Lua pure-c bindings to 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

и библиотеки magickwand к нему, в моем случае для 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.

Приведу пример конфига backend хоста, который, собственно, и занимается ресайзом. Он проксируется фронт сервером так же с 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 (Keep aspect-ratio, use higher dimension)
• WxH^ (Keep aspect-ratio, use lower dimension (crop))
• WxH! (Ignore aspect-ratio)
• WxH+ (Keep aspect-ratio, add side borders)

Сводная таблица с результатами ресайза

Итог

Учитывая всю мощь и простоту такого подхода можно реализовать вещи с довольно сложной логикой, например добавлять watermark’и или реализовать авторизацию с разграниченным доступом. Для того, чтобы узнать возможности API для работы с изображениями, можно обратиться к документации библиотеки isage/lua-imagick