Изработваме красив колаж от снимки
Случи се така, че отдавна харесвах издаването на снимки във Вконтакте, но дълго време не им обръщах внимание, смятайки ги за нещо обикновено. Те бяха толкова хармонични и приятни за окото, че изглеждаха нещо естествено и просто.
Беше решено да се повтори генерирането на колаж за снимки на стоки от онлайн магазин. Оказа се, че има много решения в jQuery, но наистина не исках да натоварвам клиентската машина с ненужна работа. Имаше желание да се подготви колаж от страната на сървъра. Освен това не с фиксирана височина на линията като Yandex.images, а с пълна динамика както вертикално, така и хоризонтално. Търсенето разочарова, няма готово решение в python. Но има библиотека Photocollage, която работи само на gui и, според мен, дори не на всички платформи. Без колебание взех назаем единствения му ключов модул collage.py), съдържащ всички обекти, цялата математика за изчисляване на колажа, който ми беше необходим, и невероятно удобен API с достъп до всички параметри на всеки елемент от генерирания колаж. Нуждае се само от инсталиран PIL, за да работи. И е необходимо само да премахнете ширината и височината на оригиналните изображения, когато създавате фото обекта.
И всичко би било просто, просто трябва да покажете този колаж в html, но бързо се натъкнах на няколко проблема: • Оказа се, че колажът се генерира за хоризонтален растеж. Тези. всяка 3-та снимка генерира допълнителна колона. Което не може да бъде удовлетворено, ако ширината на колажа е строго ограничена и растежът му трябва да намалява. • Обектът new_collage просто не предоставя никакво пространство между картините. Изходният модул прави това, когато изобразява. Първият проблем беше решен бързо чрез пренаписване на изчислението в UserCollage и разделяне на колажите на хоризонтални и вертикални. Чрез извикване на метода make_page, ние присвоявамекритична ширина на колажа, получаваме готовия обект new_collage.page. Ние работим с него.
Вторият проблем трябваше да бъде решен при компилирането на html колаж. Беше решено да се присвои style="position:absolute" на всяка клетка, да се подадат координатите отляво и отгоре към нея, да се извади стойността на границата от нейната ширина и височина, с изключение на последната. Освен това не забравяйте, ако картината е по-голяма от клетката, центрирайте я върху ядрото. Резултатът се оказа така:
Този начин за създаване на колаж има недостатъци: • Съдържа произволни. Тези. невъзможно е да се предвиди точно какъв вид колаж ще получим на изхода. Няма предварително изработен шаблон. • Понякога не можете да получите идеално плоски колажи. • Комбиниране на максимум две колони по ширината на една клетка.
Пример е тук. Можете да опресните страницата и да видите какво предлага кодът. Ако колажът не се побира в target_w, ще бъде върната старата версия на визуализацията на изображението.
Благодаря за вниманието!
И тук можете да получите грант за тестов период на Yandex.Cloud. Необходимо е само да въведете "Habr" в полето "секретна парола".
Написа добър текст - получи покана.
Предварителната модерация работи в Sandbox: преди публикуване всички материали преминават през грижовните лъчи на НЛО.
С голяма вероятност те няма да преминат предварителна модерация: