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

问题描述

我正在寻找一个吸管"工具，它为我提供了鼠标光标所在像素的十六进制值，在 CMS 的 JavaScript 中.

对于 Firefox，有出色的 ColorZilla 扩展正是如此.然而，它当然只是 FF，我真的很想与 CMS 一起提供该工具.

一位荷兰开发者提出了一个非常聪明的想法结合使用 Ajax 和 PHP 的 imagecolorat() 来找出图像上的像素颜色.但这限制了我可以访问服务器端的图像的范围，而且我真的梦想有一个通用工具.

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

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

解决方案

JavaScript 无法实现，因为它违反了跨域安全性.如果您知道图像由哪些像素组成，那就太糟糕了，http://some-other-host/yourPassword.png.如果鼠标位于画布或同一域的图像元素(或使用 Access-Control-Allow- 提供的另一个域的图像元素)，您只能告诉鼠标下方像素的颜色来源:* 标头).对于画布，您可以执行 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 也无济于事，因为它也无法读取文档的像素数据.

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.

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.

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.

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.

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.

解决方案

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);

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.

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屋！