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

Question

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

对于 Firefox，有出色的 ColorZilla正是这样做的扩展。不过，当然这只是 FF，我真的很想将这个工具与 CMS 一起提供。

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

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

我也对任何能完成 ColorZilla 功能的 IE 特定解决方案感兴趣 - 我可以接受仅支持 IE 和 FF，不过跨浏览器解决方案当然是理想的选择。

Answer 1

这对于 JavaScript 来说是不可能的，因为它不利于跨域安全。如果您知道图像由哪些像素组成，那就太糟糕了，http://some-other-host/yourPassword.png。仅当鼠标位于 Canvas 或同一域的图像元素(或使用 Access-Control-Allow- 提供服务的另一个域的图像元素)上方时，您才能辨别鼠标下方像素的颜色。来源:* header )。对于 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 也无济于事，因为它也无法读取文档的像素数据。