我在寻找一个"眼滴"工具，可以在JavaScript中为CMS提供鼠标光标所在像素的十六进制值。
对于Firefox浏览器，有一个名为ColorZilla的扩展能够完美实现这一功能。但它只适用于FF浏览器，我希望能够将其与CMS一同使用。
一位荷兰开发者想到了非常巧妙的方法，使用Ajax和PHP的imagecolorat()来查找图像上的像素颜色。但是，这种方法的局限在于只能针对服务器端能够访问到的图片进行操作，而我真正想要的是一个通用的工具。
我可以使用其中的任一方法，但更希望能够使用跨浏览器、基于JavaScript或Flash的方式，无需进行服务器端调整，也无需安装扩展程序。
如果有任何可在IE中实现类似于ColorZilla的功能的解决方案，我也会感兴趣 - 我可以支持IE和FF浏览器，虽然跨浏览器解决方案当然更理想。
由于涉及到跨域安全性，使用 JavaScript 是不可能的。如果你知道哪些像素组成了 http://some-other-host/yourPassword.png 这个图片，那么这将非常糟糕。只有当鼠标悬停在同一域名下的 canvas 或 image 元素上（或者另一个允许跨域访问的 image 元素，其服务器设置了Access-Control-Allow-Origin: * 头信息）时，才能获取鼠标所在像素点的颜色值。对于 canvas，可以使用 canvasElement.getContext('2d').getImageData(x, y, 1, 1).data 方法获取像素颜色值。对于 image 元素，则需要将它们绘制到 canvas 中，具体操作如下：
var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);
然后只需按照前面介绍的canvas方法操作即可。如果你需要能够转换为不同表示形式的颜色值，请尝试使用我的color.js库。
另外，您永远无法支持IE＆lt;9（假设IE9支持canvas），使用Flash也无济于事，因为它也不能读取文档的像素数据。
null值，但这是最好由whatwg邮件列表之一解决的问题。 - zzzzBovrequestAnimationFrame()能够以比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>
这是我的完整解决方案.. 这里我只使用了画布(canvas)和一张图片，但如果你需要在图片上使用<map>也是可以的。希望我能够帮到你。
查看新的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），则可以从屏幕上的任何位置选取颜色。 尚未跨浏览器，但干净且基于标准。
https://www.chromestatus.com/feature/6304275594477568
我相信我们很快会在所有流行的浏览器中看到它。
基本上，它将把用户的光标变成放大镜，并让用户选择页面上的任何像素（适用于图像、视频和iframe）。
const eyeDropper = new EyeDropper()
async function useEyeDropper() {
try {
const selectedColor = await eyeDropper.open()
console.log(selectedColor) // { sRGBHex: '#008080' }
} catch (err) {
console.log('eye dropper cancelled')
}
}
someTriggerEl.addEventListener('click', () => {
useEyeDropper();
})
如果您不理解async/await：
const eyeDropper = new EyeDropper()
someTriggerEl.addEventListener('click', () => {
eyeDropper.open().then(selectedColor => {
console.log(selectedColor) // { sRGBHex: '#008080' }
}).catch(() => {
console.log('eye dropper cancelled')
})
})
我对这个功能非常兴奋。
imagecolorat()返回像素颜色。除了之前给出的答案之外 --
解决这个问题的一种思路是，您想要能够截取1像素乘1像素的区域屏幕截图。捕获屏幕区域的相当普遍的技术（例如从 Web 基础的错误报告系统中）是使用有签名的 Java applet 和 java.awt.Robot 来捕获图片。如果您签署了 applet，则用户将收到“是否信任此应用”对话框（带有“始终信任该发布商的应用程序”复选框），然后将能够使用该工具。
然后，您可以使用 LiveConnect 将结果传递给 JavaScript（文档已经过时，但 Java applets 仍支持此操作），或者您可以将其发布到服务器。同样，您可以从 JavaScript 调用 Java applet。
我知道这是一篇非常旧的文章，但谷歌浏览器最近推出了一个名为“眼滴”的新API调用特性
这是从那篇博客中摘录的信息
const eyeDropper = new EyeDropper();
try {
const selectedColor = await eyeDropper.open();
console.log(selectedColor);
// logs: { sRGBHex: '#ff0000' }
} catch (err) {
console.log("color selection cancelled");
}
//You can test for support of EyeDropper using the following snippet, if you’re browsing with a browser that supports the EyeDropper API a button will be rendered below the code snippet.
if ("EyeDropper" in window) {
// supported
}
https://pqina.nl/blog/use-the-javascript-eye-dropper-api-to-select-colors-on-the-web/