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

Question

[Username]

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

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

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

Видео пример: zabavadigital.ru/projects/photo-logo

Answer 1

[Сергей]

Можно делать через canvas, можно через Node.js.
Сложный алгоритм:
- Прочитать данные изображения (ширина, высота)
- "Достать" те пиксели, которые не равны цвету фона (например, картинка белого фона, а буквы логотипа - чёрные) - назовём их "позитивные"
- Сгруппировать всю картинку по ячейкам определенных размеров (например, 1 ячейка - это 50х50 px, размеры подберите исходя из п. 1)
- "Закрасить" ячейки необходимой картинкой
- Найти пересечения ячеек и "позитивных" пикселей
- Отобразить те ячейки, которые пересекаются с "позитивными" пикселями

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

Готовые варианты:
https://github.com/gustavomazzoni/photo-mosaic
https://github.com/cemiltokatli/PhotoMosaic

Answer 2

[iBird Rose]

гугли clip-path и svg маски. к примеру:
css.yoksel.ru/svg-masks
css.yoksel.ru/css-and-svg-masks
https://css-tricks.com/clipping-masking-css/

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