Question

有一个网络应用程序供我构建，而不是图像地图，我想尝试更优雅的东西。

故事是，将有一个全球地图，其中不同的大陆用不同的颜色表示。

说澳大利亚是红色的，亚洲是绿色的。

有没有办法当我的鼠标悬停在澳大利亚的形状上时，我的代码会通过检查光标当前指向的颜色告诉我我在澳大利亚上空盘旋？

我知道我可以检查图像上的鼠标坐标或其他东西，但我真的想要得到的东西不依赖于预定义的值/形状/边距。

我们非常感谢任何想法和建议。非常感谢。

Answer 1

这取决于你的地图是什么类型的元素。浏览器中的某些元素绝对有可能支持canvas，但不支持整个页面。

查看我的类似问题的答案：JavaScript eyedropper (tell colour of Pixel under mouse cursor)

Answer 2

合并在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>，那么它也是可能的。我希望我有所帮助！

在浏览器中，我可以获得鼠标指向的图像颜色吗？

2 个答案: