我正在寻找一个“吸管”工具，它在 CMS 的 JavaScript 中为我提供鼠标光标所在像素的十六进制值。
对于 Firefox，优秀的ColorZilla扩展正是这样做的。然而，它当然只是 FF，我真的很想与 CMS 一起提供该工具。
一位荷兰开发人员有一个非常聪明的想法，即结合使用 Ajax 和 PHPimagecolorat()来找出图像上的像素颜色。但这限制了我可以访问服务器端的图像的范围，我真的梦想有一个通用工具。
我将使用这些方法之一，但更喜欢跨浏览器、基于 Javascript 或 Flash 的方式，不需要服务器端摆弄和安装扩展。
我也对做 ColorZilla 可以做的任何 IE 特定解决方案感兴趣 - 我可以只支持 IE 和 FF，尽管跨浏览器解决方案当然是理想的。
使用 JavaScript 是不可能的，因为它违背了跨域安全性。如果您知道构成图像的像素，那就太糟糕了http://some-other-host/yourPassword.png。如果鼠标位于画布或同一域的图像元素（或带有Access-Control-Allow-Origin: *标题的另一个域的图像元素）上，您只能告诉鼠标下方像素的颜色。在画布的情况下，你会做canvasElement.getContext('2d').getImageData(x, y, 1, 1).data. 对于图像，您必须使用以下命令将它们绘制到画布上：
var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);
然后只需使用先前为画布解释的方法。如果您必须能够转换为颜色值的各种表示，请尝试我的color.js库。
此外，您永远无法支持 IE <9（假设 IE9 支持画布）并且使用 Flash 也无济于事，因为它也无法读取文档的像素数据。
使用称为Browser Timing Attack的技术，可以（某种程度上）确定任何像素的颜色，即使在 iframe 上也是如此。
基本上，这种技术测量在元素上渲染 SVG 过滤器的时间，而不是颜色本身（requestAnimationFrame()允许以比 更好的精度测量时间setTimeout()）。根据当前的像素颜色，过滤器需要或多或少的时间来应用。这使得可以确定像素是否与已知颜色相同 - 例如黑色或白色。
本白皮书 (pdf) 中的更多详细信息：https : //www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf
顺便说一句：是的，这是一个浏览器安全漏洞，但我不知道浏览器供应商如何修补它。
合并在 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>图片，也可以。我希望我有所帮助。
我确实同意以利亚提供的非常详细的答案。此外，我会说在图像方面您不需要画布。正如您自己所说，您可以从 php 中获得这些图像，并且可以在服务器上进行颜色查询。
我建议您使用外部工具处理此问题 - 这使其甚至与浏览器无关（但取决于操作系统）：编写一个小工具（例如在 c# 中）为您执行颜色查询，使用快捷方式调用并提交服务器的颜色。使该工具可在您的 CMS 上下载。
我用于 CMS 的另一种方法是通过解析 CSS 来“窃取”颜色：用例是将现有网站的颜色作为调色板提供给我的应用程序：
也许这也是您的 CMS 的解决方案？
查看新的 input[type=color] HTML5 元素：http : //www.w3.org/TR/html-markup/input.color.html , http://demo.hongkiat.com/html5-form-input-type /index2.html。
现在它至少适用于 Chrome（在 Ubuntu 中测试，也适用于 Windows）。它启动操作系统提供的颜色选择对话框。如果此对话框中有一个滴管（用于 Gnome），则可以从屏幕上的任何点选取一种颜色。还不是跨浏览器，但干净且基于标准。