JavaScript吸管（鼠标光标下方像素的告诉颜色）

Question

我正在寻找“ 吸管 ”工具，该工具为CMS提供JavaScript鼠标光标所位于的像素的十六进制值。

对于Firefox，确实有出色的ColorZilla扩展。但是，它当然只是FF，我真的很想随同CMS一起提供该工具。

荷兰开发人员有一个非常聪明的主意，就是结合使用Ajax和PHP imagecolorat()来找出图像上的Pixel颜色。但这限制了我可以访问服务器端的图像的范围，而我真的梦想着有一个通用工具。

我将使用其中一种方法，但更希望使用跨浏览器，基于Javascript或Flash的方式，这种方式不需要服务器端摆弄，也不需要安装扩展程序。

我对ColorZilla可以做的任何特定于IE的解决方案也很感兴趣-我可以只支持IE和FF，尽管跨浏览器解决方案当然是理想的。

Answer 1

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也无济于事，因为它也无法读取文档的像素数据。