代码之家 › 专栏 › 技术社区 › Michael Mao

在浏览器中,我可以得到鼠标指向的图像颜色吗?

color-picker browser jquery javascript

Michael Mao · 技术社区 · 15 年前

有一个Web应用程序需要我构建,我想尝试一些更优雅的东西,而不是图像映射。

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

比如说澳大利亚是红色的,亚洲是绿色的。

当我的鼠标悬停在澳大利亚的形状上时,有没有一种方法可以让我的代码通过检查光标当前指向的颜色来告诉我悬停在澳大利亚?

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

任何想法和建议都会受到赞赏。提前多谢。

2 回复 | 直到 13 年前

Community CDub 8 年前

这取决于你的地图是什么样的元素。对于浏览器中支持 canvas 但不是整页。

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

ebragaparah 13 年前

合并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> 在图像上,这也是可能的。希望我能帮上忙!

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前