我在寻找一个"眼滴"工具，可以在JavaScript中为CMS提供鼠标光标所在像素的十六进制值。
对于Firefox浏览器，有一个名为ColorZilla的扩展能够完美实现这一功能。但它只适用于FF浏览器，我希望能够将其与CMS一同使用。
一位荷兰开发者想到了非常巧妙的方法，使用Ajax和PHP的imagecolorat()来查找图像上的像素颜色。但是，这种方法的局限在于只能针对服务器端能够访问到的图片进行操作，而我真正想要的是一个通用的工具。
我可以使用其中的任一方法，但更希望能够使用跨浏览器、基于JavaScript或Flash的方式，无需进行服务器端调整，也无需安装扩展程序。
如果有任何可在IE中实现类似于ColorZilla的功能的解决方案，我也会感兴趣 - 我可以支持IE和FF浏览器，虽然跨浏览器解决方案当然更理想。
除了图像或<canvas>，没有内置的DOM方法可以通用地获取DOM元素在特定像素位置的颜色。
因此，为了实现这一点，我们必须使用类似于HTML2Canvas或DOM Panda的工具来对我们的网站进行“截屏”，获取用户的点击位置，并获取该特定位置“截屏”中的像素颜色。
使用HTML2Canvas（版本0.5.0-beta3），您可以执行以下操作：
// Take "screenshot" using HTML2Canvas
var screenshotCanvas,
screenshotCtx,
timeBetweenRuns = 10,
lastTime = Date.now();
function getScreenshot() {
// Limit how soon this can be ran again
var currTime = Date.now();
if(currTime - lastTime > timeBetweenRuns) {
html2canvas(document.body).then(function(canvas) {
screenshotCanvas = canvas;
screenshotCtx = screenshotCanvas.getContext('2d');
});
lastTime = currTime;
}
}
setTimeout(function() { // Assure the initial capture is done
getScreenshot();
}, 100);
// Get the user's click location
document.onclick = function(event) {
var x = event.pageX,
y = event.pageY;
// Look what color the pixel at the screenshot is
console.log(screenshotCtx.getImageData(x, y, 1, 1).data);
}
// Update the screenshot when the window changes size
window.onresize = getScreenshot;
background-color。 - shreyasm-dev我想在@BorrisTB的回答上添加两个重要考虑因素（以及每个人都指向EyeDropper API的可用性的答案）。
window.isSecureContext = true。这只可能在本地主机和仅限于HTTPS的情况下发生。因此，请确保页面通过HTTPS加载，以使API可用。