Задать вопрос
@exhang
javascript

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

Скрин с ютуба)) 5c370a5b242c9282872244.jpeg

Можно ли сделать такой же "умный" фон средствами javascript, php и тд.? Если размер фото должен быть например 600x600 но фото в вертикальном положении и есть белые поля по бокам? Может быть есть какие то библиотеки? Гуглежка не дала результата, даже и не знаю как это назвать))
  • Вопрос задан
  • 526 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
SagePtr
@SagePtr
Еда - это святое
Могу словами описать алгоритм построения изображения:
1) Вычисляем ширину боковой полосы ((итоговая ширина - исходная ширина) / 2)
2) Создаём временное изображение шириной с боковую полосу, но на n пикселей шире (в зависимости от силы размытия)
3) Копируем во временное изображение левую часть картинки (втупую функцией imagecopy), выровняв её по левому краю.
4) Размываем функцией imagefilter, силу размытия подбирайте сами на свой художественный вкус.
5) Создаём конечное изображение
6) Копируем наше размытое изображение в левую часть конечного изображения
7) Во временное изображение копируем правую часть исходного изображения с выравниванием по правому краю
8) Повторяем размытие для него
9) Копируем в конечное изображение по правому краю
10) Напоследок - копируем исходное изображение в конечное изображение по центру (левая координата = ((конечная ширина - исходная ширина) / 2)
11) Сохраняем изображение и освобождаем память (впрочем, PHP сам освободит)
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
PavelMonro
@PavelMonro
Есть фильтр 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>
Ответ написан
9 комментариев
9 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тестовое приложение для коннекта по SIP
20 апр. 2024, в 09:15
8000 руб./за проект
Сканер коэффициентов в букмекерских конторах
20 апр. 2024, в 08:39
100000 руб./за проект
Доработать бота
20 апр. 2024, в 08:24
1500 руб./за проект
Ещё заказы