Как сделать красивый фон, если фото/картинка в вертикальном положении?

Question

[exhang]

Скрин с ютуба))

Можно ли сделать такой же "умный" фон средствами javascript, php и тд.? Если размер фото должен быть например 600x600 но фото в вертикальном положении и есть белые поля по бокам? Может быть есть какие то библиотеки? Гуглежка не дала результата, даже и не знаю как это назвать))

Comments

[Rustam Bainazarov]

Если фотографий будет много, на. JS и CSS (filter: blur(10px) делать не нужно, ибо производительность так себе.

В одном проекте я сделал так: если фото не покрывало блок полностью, то внутри родительского контейнера я искал img, копировал путь до картинки, находил выше по разметке блок-подложку и вставлял путь до картинки в style="background-image: url(XXX). Ну а на CSS этот блок размывал, позиционировал и т. д. Производительность на старых машинах была не совсем хорошая не из-за JS, а именно из-за filter: blur(10px). Таких фотографий на странице было по 18 штук.

Лучше серверное решение. В итоге я попросил программиста написать такую штуку, пару дней -- и было готово.

[exhang]

SmthTo, да, наверное серверное решение будет самым оптимальным, т.е делать самопис, ничего готового для этого нет?

[Rustam Bainazarov]

exhang, год назад найти не удалось, но как-то в целом быстро получилось у человека реализовать.

Answer 1

[SagePtr]

Могу словами описать алгоритм построения изображения:
1) Вычисляем ширину боковой полосы ((итоговая ширина - исходная ширина) / 2)
2) Создаём временное изображение шириной с боковую полосу, но на n пикселей шире (в зависимости от силы размытия)
3) Копируем во временное изображение левую часть картинки (втупую функцией imagecopy), выровняв её по левому краю.
4) Размываем функцией imagefilter, силу размытия подбирайте сами на свой художественный вкус.
5) Создаём конечное изображение
6) Копируем наше размытое изображение в левую часть конечного изображения
7) Во временное изображение копируем правую часть исходного изображения с выравниванием по правому краю
8) Повторяем размытие для него
9) Копируем в конечное изображение по правому краю
10) Напоследок - копируем исходное изображение в конечное изображение по центру (левая координата = ((конечная ширина - исходная ширина) / 2)
11) Сохраняем изображение и освобождаем память (впрочем, PHP сам освободит)

Answer 2

[Павел]

Есть фильтр blur, гуглите blur css, по сути можно по разному реализовать.
При наведении или клике на фото, получаем фото по ссылке, а фон сзади размазываем этим blur, по структуре что то вроде такого:

<div class="blur"></div>
<div class="image">
<a href="image/1.jpg" class="popup_image"><img src="image/1sm.jpg" alt="" title=""></a>
</div>

Comments

[Rustam Bainazarov]

Если несколько таких фото, производительность может быть низкой на слабых устройствах и особенно на мобильных. filter: blur() весьма дорогое свойство.

[Павел]

SmthTo, если погуглить то можно найти реализацию через js + svg

[exhang]

SmthTo, это плохой вариант, производительность нужна, ищу серверное решение теперь

[Rustam Bainazarov]

Павел, я понимаю, пробовал и SVG'ешный <feGaussianBlur stdDeviation="5" result="blur" />, производительность этой штуки аналогичная.

[Роман]

Php imagefilter Насчет производительности не знаю правда

[Rustam Bainazarov]

exhang, наверное, не мне комментарий :))

[Moskus]

exhang, ну а какое ещё может быть серверное решение, кроме как на сервере сгенерировать размытое изображение из исходного? Использовать imagemagick, естественно.

[exhang]

Moskus, спасибо, буду копать в этом направлении. Бывают просто иногда библиотеки для каких то таких задач встречаются, значит будем думать, писать ;)

[Moskus]

exhang, www.imagemagick.org/Usage/blur