Отрезаем голову в nginx

в 5:54, , рубрики: crop, nginx, Веб-разработка, обработка изображений, метки: ,

Не так давно я рассказывал, как у нас в Topface устроено хранение и раздача пользовательских картинок на Topface Developer Day (презентация на speakerdeck), где рассказывал, что картинки мы нарезаем на лету в nginx с помощью image_filter.

Люди в основном продолговатые в вертикальном направлении и фотографии себя для сервиса знакомств делают соответствующие, дизайнеры хотят квадратики, а nginx вырезает людям не совсем то, что интересует людей (лицо я имею в виду). На примере longcat получается примерно следующее:

longcat

Жить с этим приходится обычным способом: взять и дописать самому. В итоге у меня получился патч для модуля image_filter, которому можно сказать, с какой стороны картинки не нужно отрезать края, когда происходит crop. Всё добро на github.

Настройка

Всё просто, нужно вписать директиву в нужный вам location или server.

image_filter_offset {left,center,right} {top,center,bottom};

Наглядные примеры
Вертикальные картинки

Оригинал

Original vertical image

Выравнивание по верху: image_filter_offset center top;

Aligned to top vertical image

Выравнивание по центру (обычное поведение): image_filter_offset center center;

Aligned to center vertical image

Виравнивание по низу: image_filter_offset center bottom;

Aligned to bottom vertical image

Горизонтальные картинки

Оригинал

Original horizontal image

Выравнивание слева: image_filter_offset left center;

Aligned to left horizontal image

Выравнивание по центру (обычное поведение): image_filter_offset center center;

Aligned to center horizontal image

Выравнивание справа: image_filter_offset right center;

Aligned to right horizontal image

Для тех, кто пропустил: ссылка на github.

Автор: bobrik

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js