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

Question

[durnevdanya]

Всем привет. Интересуюсь созданием мобильных приложений. Хочу сделать различные фильтры на фото. Так вот вопрос: как можно реализовать обработку фото с таким конечным результатом на js?

Answer 1

[Vitaliy]

Сегментация. Но если сравнить с полученным результатом, то вероятнее фото выше создано через графический редактор

https://codepen.io/Ni55aN/pen/PjRmBE

Comments

[durnevdanya]

Добрый день. А существуют ли готовые решение(библиотеки, фреймворки)

[Vitaliy]

durnevdanya: библиотек не находил. Реализация не такая уж трудоемка (конечно зависит от метода), но один из простых алгоритмов
- найти N самых часто встречаемых цветов (нужно еще определить диапазоны для каждого из цвета в RGB). Можно применить и как для фото в оттенках серого, так легче
- каждый пиксель изображения заменить тем цветом, который ближе всего из найденных

[durnevdanya]

Виталий Столяров: Чтож, ладно. Для меня пока что эту трудно. Я работал с js, но не так углубленно. Ваш алгоритм мне будет сложно реализовать(не понимаю, как все это можно произвести с фоткой: нахождение пикселей, замена). Это же вам не alert писать :)

[durnevdanya]

Виталий Столяров: Тем более там же еще отдельные части: волосы, рот, глаза, уши. Не представляю реализацию

[Vitaliy]

durnevdanya: алгоритм не привязан к языку программирования. В JS все что нужно, это получить буфер с значениями яркостей каждого каналов (RGBA) для каждого пикселя. То есть массив размерностью 4*width*height. Как получить - тут

[durnevdanya]

Виталий Столяров: А почему width*height умножать на 4? А что с массивом в дальнейшем делать?
P.S - видел в интернете онлайн редакторы. Кидаешь им фотку, а он тебе ее редактирует под такой именно стиль. Но получалось так, что где то не было волос и.т.п
Я же хочу сделать не сайт, а мобильное приложение. Но проблема в этой цели лишь в создании алгоритма по обработке фотографии.

[Vitaliy]

durnevdanya: какой используете инструмент под мобильную разработку на js? Может у него есть специфичные методы по работе с изображениями.

4 - четыре канала для каждого пикселя

[durnevdanya]

Виталий Столяров: Ionic - для создания моб.приложений

[Vitaliy]

durnevdanya: похоже что с изображениями (canvas) можно работать так же, как и на фронтенде

[Vitaliy]

durnevdanya: попробовал сделать по описанному мою методу, но работает он нормально только для некоторых изображений https://codepen.io/Ni55aN/pen/PjRmBE. Вероятнее простым методом не обойтись, а придется использовать кластеризацию

[durnevdanya]

Виталий Столяров: Выдает 404

[Vitaliy]

durnevdanya: https://codepen.io/Ni55aN/pen/PjRmBE
применил кластеризацию, но получилось не совсем то. На представленном фото более сглажены края, вероятно используются другие методы. Если это вообще результат машинной обработки, а не человеком в графическом редакторе

[durnevdanya]

Виталий Столяров: Спасибо за ваш код. В будущем буду брать пример с вас. С представленной мной картинкой я не уверен, может быть и авторская работа, а не машинная.