Как найти координаты белых областей на картинке через JS?

Проблема такая. Есть картинки такого рода:
5b7ef53fcea79974788496.png
На них есть белые области разной формы. В них должны вставляться другие картинки с автоизменением их размера. Для этого нужно как-то получить координаты этих белых областей на картинке. Как это можно реализовать? И возможно ли?
  • Вопрос задан
  • 123 просмотра
Пригласить эксперта
Ответы на вопрос 4
1) Изначально для каждой картинки прописывать маску вручную (удобнее всего svg)
2) Эту картинку накладывать просто поверх, а пользователь сам уже переместит как ему надо
3) И самый сложный способ - загнать картинку в canvas. Идти по точкам и смотреть какой у них цвет, находить белую и идти от неё считая только белые пиксели. Если кол-во пикселей больше N, то рисуем там объект в который заливаем фотографию.
Ответ написан
Комментировать
Я бы шел от противного, взял бы фон без белых областей, а картинки бы на него посадил куда мне нужно. Можно под каждый фон сделать конфиг с координатами и размерами картинок.
Ответ написан
Комментировать
madmages
@madmages
Человек прямоходящий
грузишь картинку в canvas и получаешь массив пикселей, выбираешь какой оттенок белого тебе подходит.
https://www.html5canvastutorials.com/advanced/html...
Ответ написан
Комментировать
@rPman
Уменьшаете разрешение картинки (несколько раз в 2 раза), и для каждого раза вызываете рекурсивно очередное уменьшение до заранее заданного лимита (чтобы минимально допустимая область вмещала в себя больше одного пиксела, лучше четыре), затем ищете на итоговом изображении белые пикселы (в зависимости от выбора способа усреднения цвета, брать либо чисто белый цвет либо пороговое значение), найденные области (группы пикселов) возвращаете в предыдущую функцию, которая уточняет контур (в том виде какой вам нужен, либо векторном либо пиксельном формате) так же поиском белых пикселов но только в указанных областях, и так далее. К условию добавления пиксела в область можно добавить наличие соседнего белого пиксела, но это имеет смысл только на первом вызове (оригинальное разрешение изображения).

По завершению у вас метод вернет список областей, являющихся белыми.

p.s. если белые области чисто белые и замкнутые (точками другого цвета) то можно используя алгоритм заливки, сделать сканирование изображение вертикальными или горизонтальными линиями (с шагом равным или меньше минимального размера области) и как только находите белое изображение - заливаете его пока цвет белый (заливку производите в своей битовой маске - один на пиксел, т.е. итоговая область пиксельная).

Этот алгоритм значительно шустрее, но работает только с замкнутыми областями и относительно равномерным белым цветом, т.е. если там будут разводы и переходы, будет заметно сложнее)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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