dalv_happy
@dalv_happy

Как реализовать фото мозайку на js?

Добрый вечер!

Есть база с фотографиями, есть логотип, необходимо, чтобы из живых фотографиях образовался логотип, если фотография вылезает за края, то необходимо её кропнуть по форме логотипа.

Как такое можно реализовать?

Видео пример: zabavadigital.ru/projects/photo-logo
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ответы на вопрос 2
@vazonov
Javascript developer
Можно делать через canvas, можно через Node.js.
Сложный алгоритм:
- Прочитать данные изображения (ширина, высота)
- "Достать" те пиксели, которые не равны цвету фона (например, картинка белого фона, а буквы логотипа - чёрные) - назовём их "позитивные"
- Сгруппировать всю картинку по ячейкам определенных размеров (например, 1 ячейка - это 50х50 px, размеры подберите исходя из п. 1)
- "Закрасить" ячейки необходимой картинкой
- Найти пересечения ячеек и "позитивных" пикселей
- Отобразить те ячейки, которые пересекаются с "позитивными" пикселями

Простой алгоритм: как посоветовал товарищ iBird Rose, используйте маски

Готовые варианты:
https://github.com/gustavomazzoni/photo-mosaic
https://github.com/cemiltokatli/PhotoMosaic
Ответ написан
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
гугли clip-path и svg маски. к примеру:
css.yoksel.ru/svg-masks
css.yoksel.ru/css-and-svg-masks
https://css-tricks.com/clipping-masking-css/

ну а как расположить фотографии, я думаю уж точно нагуглишь
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы