- PVSM.RU - https://www.pvsm.ru -

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

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

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

longcat

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

Настройка

Всё просто, нужно вписать директиву в нужный вам 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 [3].

Автор: bobrik

Источник [4]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/nginx/19141

Ссылки в тексте:

[1] Topface: http://team.topface.com/

[2] презентация на speakerdeck: https://speakerdeck.com/bobrik/node-dot-js-for-millions-of-images

[3] Всё добро на github: https://github.com/bobrik/nginx_image_filter

[4] Источник: http://habrahabr.ru/post/157457/