В браузере я могу получить цвет изображения, на который указывает моя мышь? - PullRequest
Новая
       10

В браузере я могу получить цвет изображения, на который указывает моя мышь?

5 голосов
/ 11 марта 2010

Для меня существует веб-приложение, и вместо карты изображений я хотел бы попробовать что-то более элегантное.

История в том, что будет глобальная карта, на которой разные континенты обозначены разными цветами.

Скажем, Австралия красная, а Азия зеленая.

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

Я знаю, что могу проверить координаты мыши на изображении или что-то еще, но я действительно хочу получить что-то, что не зависит от предварительно определенных значений / форм / полей.

Любая идея и предложение будут высоко оценены. Заранее большое спасибо.

Ответы [ 2 ]

7 голосов
/ 11 марта 2010

Это зависит от того, какой элемент вашей карты. Это определенно возможно для определенных элементов в браузерах, которые поддерживают canvas, но не для всей страницы.

Смотрите ответы на мой похожий вопрос: Пипетка JavaScript (укажите цвет пикселя под курсором мыши)

2 голосов
/ 10 января 2012

Объединяя различные ссылки, найденные здесь в StackOverflow и на других сайтах, я сделал это, используя javascript и JQuery: 

<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="jquery.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'photo_apple.jpg';
        context.drawImage(img, 0, 0);
    };

    function findPos(obj){
    var current_left = 0, current_top = 0;
    if (obj.offsetParent){
        do{
            current_left += obj.offsetLeft;
            current_top += obj.offsetTop;
        }while(obj = obj.offsetParent);
        return {x: current_left, y: current_top};
    }
    return undefined;
    }

    function rgbToHex(r, g, b){
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
    }

$('#myCanvas').click(function(e){
    var position = findPos(this);
    var x = e.pageX - position.x;
    var y = e.pageY - position.y;
    var coordinate = "x=" + x + ", y=" + y;
    var canvas = this.getContext('2d');
    var p = canvas.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    alert("HEX: " + hex);
});
</script>
<img src="photo_apple.jpg"/>
</body>
</html>

Здесь я использовал только холст и одно изображение, но если вам нужно использовать <map> поверх изображения, это тоже возможно. Я надеюсь, что помог!

...