JavaScript吸管（告诉鼠标光标下的像素颜色） [英] JavaScript eyedropper (tell color of pixel under mouse cursor)

问题描述

我正在寻找一个 eyedropper 工具，它为我提供了鼠标光标所在像素的十六进制值，用于CMS的JavaScript。

I am looking for an "eyedropper" tool, that gives me the hex value of the pixel the mouse cursor is under, in JavaScript for a CMS.

对于Firefox，有优秀的 ColorZilla 扩展就是这样做的。但是，它当然只是FF，我真的很想将这个工具和CMS一起交付。

For Firefox, there is the excellent ColorZilla extension that does exactly that. However, it's FF only of course, and I would really like to deliver the tool along with the CMS.

一位荷兰开发人员有 非常聪明的想法 使用Ajax和PHP的 imagecolorat的组合（ ）找出图像上的像素颜色。 但这限制了我可以访问服务器端的图像的范围，我真的梦想着一个通用的工具。

A dutch developer has had the very clever idea of using a combination of Ajax and PHP's imagecolorat() to find out the Pixel colour on an image. But that limits the range to images I can access server side, and I'm really dreaming of a universal tool.

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

I will work with one of these approaches, but would much prefer a cross-browser, Javascript or Flash based way that requires no server-side fiddling and no installing of extensions.

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

I am also interested in any IE specific solutions that do what ColorZilla can do - I could live with supporting IE and FF only, though a cross browser solution would of course be ideal.

推荐答案

使用JavaScript是不可能的，因为它违反了跨域安全性。如果您知道像素构成了什么像素，那将是非常糟糕的， http：//some-other-host/yourPassword.png 。如果鼠标位于画布上或同一域的图像元素（或者使用 Access-Control提供的另一个域的图像元素），则只能告诉鼠标下像素的颜色-Allow-Origin：* 标题）。对于画布，您可以使用 canvasElement.getContext（'2d'）。getImageData（x，y，1,1）.data 。对于图像，您必须将它们绘制到具有以下内容的画布：

It's not possible with JavaScript as it goes against cross-domain security. It would be very bad if you knew what pixels made up the image, http://some-other-host/yourPassword.png. You can only tell the color of the pixel under the mouse if either the mouse is over a canvas or an image element of the same domain (or an image element of another domain which is served with an Access-Control-Allow-Origin: * header). In the case of the canvas, you would do canvasElement.getContext('2d').getImageData(x, y, 1, 1).data. In the case of the images, you would have to draw them to a canvas with:

var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);

然后只需使用前面针对画布解释的方法。如果您必须能够转换为各种颜色值表示，请尝试我的 color.js 库。

And then just use the previous method explained for canvases. If you must be able to convert to various representations of color values, try my color.js library.

此外，你永远无法支持IE< 9（假设IE9支持画布）并且使用Flash无法帮助它，因为它可以' t读取文档的像素数据。

Also, you're never going to be able to support IE <9 (that's assuming that IE9 supports canvas) and using Flash won't help as it can't read the pixel data of the document either.

这篇关于JavaScript吸管（告诉鼠标光标下的像素颜色）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！