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

一尘不染

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

javascript

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

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

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

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

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

阅读 631

2020-05-01

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

2020-05-01