在浏览器中，我可以获得鼠标指向的图像颜色吗？
Posted
技术标签:
【中文标题】在浏览器中，我可以获得鼠标指向的图像颜色吗？【英文标题】：In browser can I get the image color where my mouse is pointing at? 【发布时间】：2011-01-26 09:16:22 【问题描述】：有一个网络应用程序供我构建，而不是图像地图，我想尝试一些更优雅的东西。
故事是，会有一张全球地图，其中不同的大陆用不同的颜色表示。
说澳大利亚是红色的，亚洲是绿色的。
有没有一种方法，当我的鼠标悬停在澳大利亚的形状上时，我的代码会通过检查我的光标当前指向的颜色来告诉我我正在悬停在澳大利亚？
我知道我可以检查图像或其他东西上的鼠标坐标，但我真的想得到不依赖于预定义值/形状/边距的东西。
任何想法和建议将不胜感激。提前非常感谢。
【问题讨论】：
这里有一些其他关于地图突出显示的好主意 (1) David Lynch 的 jQuery 插件 (davidlynch.org/blog/2008/03/…) 和 (2) 另一个 Mapper (netzgesta.de/mapper) 【参考方案1】：合并 *** 和其他网站中的各种参考资料，我使用 javascript 和 JQuery 进行了合并：
<html>
<body>
<canvas id="myCanvas" 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】：这取决于您的地图是哪种元素。支持canvas的浏览器中的某些元素肯定是可能的，但不是整个页面。
查看我的类似问题的答案：JavaScript eyedropper (tell colour of Pixel under mouse cursor)
【讨论】：
非常感谢您的快速回答，让我去检查一下！以上是关于在浏览器中，我可以获得鼠标指向的图像颜色吗？的主要内容，如果未能解决你的问题，请参考以下文章