Декодировать изображение и проверить прозрачен ли пиксель соответствующий точке

[Роман Андреевич]

Коллеги, доброго времени суток, есть вопрос из ряда фантастики. Никогда не сталкивался но вот пришлось. Суть такая:

Пишу проект, интерактивная карта (на leaflet) на которою добавляю слои в виде картинок png. По сценарию юзер может выбрать область на карте, и в ней найти нужные объекты - участки земли. И так, область выбирается путем рисования прямоугольника, иными словами у нас есть координаты углов.

Далее я получаю координаты точек внутри прямоугольника и сохраняю их в массив. Встает проблема, при чесе массива получается от 1 до 5000 итераций, на каждой итерации отправляется запрос, приходит ответ и так далее. Результат запроса, объект и картинка, которую нужно наложить на карту по координатам, с этим то же все нормально. Вот пример:



Желтая собственно картинка которая приходит.



А это выделенный участок (маркеры для проверки, что точки расставились правильно).

Так вот, при первом запросе, нарисуется картинка, это png 256*256, и она квадратная. Но мне нужно из зоны загруженной картинки убрать точки. Что бы не было лишних запросов.

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

Теперь вопрос, к знатокам, один умный человек, предложил декодировать изображение и проверить прозрачен ли пиксель соответствующий точке. Вопрос как это сделать??????

Буду благодарен за любые коменты по теме. Если не понятно что то написал, спрашивайте, все расскажу как есть....

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

[Alexandroppolus]

Теперь вопрос, к знатокам, один умный человек, предложил декодировать изображение и проверить прозрачен ли пиксель соответствующий точке. Вопрос как это сделать??????

canvas
getImageData

[j0hnik]

ctx.getImageData(0,0,256,256)['data'].filter((el,i)=> i%4==3)[555]; //тут получаем все пиксели и фильтруем оставляя только альфаканал, потом обращаемся к пикселю который хотим проверить.

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

[Роман Андреевич]

Спасибо за направление, а можно пример хотя бы как это должно выглядеть:

структура следующая: leaflet генерирует карту и создает блоки в которых размещаются слои + canvas для векторов + слои jverlays тут и выводится слой с той самой желтой картинкой. Как в данных условиях проверить пиксели???

И к тому же все проверять не нужно. Из "картинки 2" видно что есть прямоугольник на котором маркеры стоят (они стоят для моей проверки, но по факту есть массив с координатами точек) на тех самых координатах из массива. Прямоугольник нарисован на canvas. Желтая картинка встанет поверх прямоугольника. Она как сказа квадратная, мне нужно убрать все точки именно с желтой фигуры. При чем координаты соответственно это долгота и широта, а не точки с экрана. У lealfet есть методы перевода x y в lat lng. Но если не сложно, знатоки, хотя бы пример как это выглядит покажите....\

Заранее благодарю...