JavaScript 滴管(告诉鼠标光标下像素的颜色)

Question

我正在寻找一个“吸管”工具，它可以在 CMS 的 JavaScript 中为我提供鼠标光标所在像素的十六进制值。

对于 Firefox，有优秀的 ColorZilla正是这样做的扩展。然而，它当然只是 FF，我真的很想随 CMS 一起提供该工具。

一位荷兰开发人员拥有 very clever idea结合使用 Ajax 和 PHP 的 imagecolorat() 找出图像上的像素颜色。 但这限制了我可以访问服务器端的图像的范围，我真的梦想有一个通用工具。

我将使用这些方法中的一种，但更喜欢跨浏览器、基于 Javascript 或 Flash 的方法，这种方法不需要服务器端操作，也不需要安装扩展。

我也对任何 IE 特定的解决方案感兴趣，这些解决方案可以完成 ColorZilla 可以做的事情 - 我可以忍受只支持 IE 和 FF，尽管跨浏览器解决方案当然是理想的。

Answer 1

JavaScript 是不可能的，因为它不利于跨域安全。如果您知道图像是由哪些像素构成的，那就太糟糕了，http://some-other-host/yourPassword.png。如果鼠标在 Canvas 上或同一域的图像元素(或使用 Access-Control-Allow- 提供的另一个域的图像元素)，您只能告诉鼠标下方像素的颜色来源:* 标题)。对于 Canvas ，您可以执行 canvasElement.getContext('2d').getImageData(x, y, 1, 1).data。对于图像，您必须使用以下方法将它们绘制到 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 <9(假设 IE9 支持 Canvas )并且使用 Flash 也无济于事，因为它也无法读取文档的像素数据。