Автоматический кроп фото на сайте?

Question

[Алексей Чистяков]

Есть фото товара на белом фоне. Пропорции фото всегда одинаковые, но сам товар может занимать разную площадь — некоторые практически вписаны во весь размер, некоторые товары мелкие и не всегда правильно отцентрованы.

Какой примерно порядок действий вижу:
1. Вычислить границы объекта без фона и отрезать фон.
2. Добавить по 40-50px отступов белого цвета по всем краям.
3. Зная ширину и высоту полученного объекта и пропорции итоговой фотографии, определяем по какой стороне вписываем объект в эти пропорции, фон заливаем белым цветом, чтобы на выходе получилась фото одного и того же формата. Ширина/высота будут отличаться, но это не важно. Важны пропорции.

В результате должно получиться что-то вроде:


Эти фото нужны для импорта на сайт. Нужно или заранее готовить их перед загрузкой, или научить битрикс это делать самостоятельно. Подскажите, пожалуйста, в какую сторону копать, или как правильно поставить задачу программисту, если он ранее такое не делал?

Comments

[Everything_is_not_so_bad]

Если не ошибаюсь, умеет сервис Cloudinary - отдавать картинки налету.

[U235U235]

Imagemagick может это все.

Answer 1

[ThunderCat]

Фотошоп + экшн в 4 кнопки. Слить всю папку локально и натравить на нее экшн в батч режиме. Средствами серверного ПО имхо это малореально.

Comments

[Алексей Чистяков]

Спасибо за ответ. Вариант с фотошопом подходящий. Как сделать экшн в ФШ понимаю, не пойму как там вычислять края и потом вписывать их в нужные пропорции. Товары могут быть разные: условно — горизонтальный и вертикальный прямоугольники по разным краям будут вписываться. Какие команды хотя бы гуглить?

[ThunderCat]

Алексей Чистяков, Тупо колор селект - белый, инверс селекшн, кроп селектед, канвас сайз по центру + сколько надо пикселей.

[Алексей Чистяков]

ThunderCat, Первые три действия понятны. "Канвас сайз по центру" — тут уже не совсем то, что нужно. Товары на фото разных размеров — есть широкие и невысокие, есть узкие и высокие. Размеры фото всегда разные будут, неизменными должны быть только итоговые пропорции.

[ThunderCat]

Алексей Чистяков, не очень понял, у вас все фото в итоге вертикальные, или есть и горизонтальные?

[Алексей Чистяков]

ThunderCat Все фото вертикальные. Товары на них могут быть расположены по всякому - вертикально или горизонтально. Не всегда пропорции самого товара одинаковые. Сейчас я кропаю руками в ФШ и какие-то вписываю по ширине, какие-то по высоте.

[ThunderCat]

Алексей Чистяков, Короче есть 3 варианта, каждый плох по своему )
Для всех трех желательно создать пустую белую картинку в желаемом финальном виде - пропорции и размер, а так же применить ко всем фото вышеописанный алгоритм кропа.
Далее:
1) Использовать скриптинг на жс для фотошопа, и разместить картинки в размер программно. Имхо самый неудобный вариант.
2) Использовать FastStone и его фишки, и получить сразу как надо:


3) Использовать фотошоп, через батч, применить файл-автомэйт-фит имадж, и потом уже расширить до размера канваса от центра.

[Алексей Чистяков]

Такие варианты тоже не подходят. Логика поиска объекта мне понятна, непонятно как дальше вписывать его, чтобы на выходе получалось фото всегда в одних и тех же пропорциях. Попробую показать на конкретном примере.

1) Два реальных фото товара. Всегда одинаковые фото фиксированного размера в пикселях. Товары на фото могут быть разных размеров.
2) Ручной кроп с сохранением пропорций — то, что делаем сейчас. На выходе получаем фото разного размера в пикселях, но общие пропорции всегда одинаковые. Такой результат полностью устраивает..
3) Вариант, который предлагаете вы. Объект корректно определится и обрежется, но пропорции не будут соблюдены. Менять размеры получившегося объекта и пытаться вписать его в фиксированный белый прямоугольник не хочется. Как построить белый прямоугольник нужных пропорций вокруг объекта, размеры которого определили на предыдущем этапе?

[ThunderCat]

Алексей Чистяков,

Объект корректно определится и обрежется, но пропорции не будут соблюдены.

Будут, почему не будут?

Менять размеры получившегося объекта и пытаться вписать его в фиксированный белый прямоугольник не хочется.

Почему? Какая по сути разница? Сделайте его определенного размера, хорошо вписывающегося в ваш дизайн и все, судя по картинке запас по пикселям там большой. Сделайте 1600х1450 например, и все ровняйте к нему. Вот экшн который ровняет все норм вроде, можете подкрутить по селектам/размерам и вперед...

[ThunderCat]

Алексей Чистяков, картинка до
и после

Answer 2

[NubasLol]

Использовали для этого этот сервис на проекте, но уже не помню как именно настроивали, может что найдёшь

https://docs.imgproxy.net/object_detection?id=usag...

Answer 3

[topuserman]

На самом деле автоматизировать это дело, ничего сложного нет.

4 цикла пускаете и всё.

Первый цикл пробегается сверху вниз, по горизонтали, до тех пор, пока цвет пикселя белый (если там разные оттенки белого, просто сравниваете его яркость: (r + g +b) / 3).

Как нашли тёмный пиксель, значит определили верхнюю границу.

И тоже самое с 3 других сторон.

Потом кроп по этим координатам.

UPD:

PS: зеленая стрелка случайно вышла)

при кропе, из найденных координатов вычетаете по N пикселей, чтобы фотка не была приклеена к краям.

тут есть много способов оптимизации.

например, чтобы не проходить по каждому пикселю, можете каждый 10 или 50 пикселей, как нашли темный пиксель, двигаетесь в обратном порядке, чтобы найти начало.

UPD2: там в ответах выше предлагают фотошопами и т.д. если жто единоразовая работа, то можно и так.

если контент менеджер постоянно загружает изображения, и т.д. то надо автоматизировать.

Comments

[Алексей Чистяков]

Не совсем так. Логика поиска объекта мне понятна, непонятно как дальше вписывать его, чтобы на выходе получалось фото всегда в одних и тех же пропорциях. Попробую показать на конкретном примере.

1) Два реальных фото товара. Всегда одинаковые фото фиксированного размера в пикселях. Товары на фото могут быть разных размеров.
2) Ручной кроп с сохранением пропорций — то, что делаем сейчас. На выходе получаем фото разного размера в пикселях, но общие пропорции всегда одинаковые. Такой результат полностью устраивает..
3) Вариант, который предлагаете вы. Объект корректно определится и обрежется, но пропорции не будут соблюдены. Менять размеры получившегося объекта и пытаться вписать его в фиксированный белый прямоугольник не хочется. Как построить белый прямоугольник нужных пропорций вокруг объекта, размеры которого определили на предыдущем этапе?