Клуб API Карт

Как определить цвет пикселя под курсором

jitendra
14 апреля, 23:06

Я добавляю новый слой для отображения тайлов температуры.

Мне нужно, чтобы при передвижении курсора по карте выводился хинт с текущим значением температуры в этой точке. Температуру можно было бы определять по градациям цвета температурного тайла. Но для этого нужно взять цвет пикселя по текущим координатам. Как это сделать штатным способом, я не нашёл.

Попробовал определять цвет взяв данные из canvas.

Но тут возникла проблема.

var canvas=jQuery('canvas')[0];
var context = canvas.getContext('2d');
var img_data = context.getImageData(1,1,2,2);

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at <anonymous>:1:24

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

Есть какой-либо иной способ получить  цвет пикселя по определенным координатам?

Или это не решаемая задача?

2 комментария
Можно проксировать запросы за тайлами через свой сервер
Это создаст дополнительную нагрузку на сервер. Сейчас клиентское приложение получает погодные тайлы самостоятельно. Получается что овчинка не стоит выделки. Чтобы показать хинт придется нагрузить сервер.


А если отказаться от canvas. Раньше карта выводилась тайлами.


Примерно так


<ymaps style="position: absolute; transform: translate3d(0px, 0px, 0px) scale(1, 1); left: 0px; top: 0px;">
<ymaps style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-repeat: no-repeat; background-image: url(&quot;https://vec02.maps.yandex.net/tiles?l=map&amp;v=17.04.13-0&amp;x=88&amp;y=39&amp;z=7&amp;scale=1&amp;lang=ru_RU&quot;); width: 256px; height: 256px; left: -1302px; top: -574px;" unselectable="on"></ymaps>
<ymaps style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-repeat: no-repeat; background-image: url(&quot;https://vec01.maps.yandex.net/tiles?l=map&amp;v=17.04.13-0&amp;x=88&amp;y=40&amp;z=7&amp;scale=1&amp;lang=ru_RU&quot;); width: 256px; height: 256px; left: -1302px; top: -318px;" unselectable="on"></ymaps>
....
<ymaps>


А сейчас через canvas


<ymaps style="position: absolute; z-index: 150;">
<canvas height="832" width="1729" style="position: absolute; width: 1729px; height: 832px; left: -128px; top: -128px;"></canvas>
</ymaps>



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


Вот только как отказаться от canvas неясно.