Jquery JavaScript 吸管(告诉鼠标光标下像素的 colored颜色 )

发布于12月20日

我正在寻找一个"eyedropper"工具，它可以给我鼠标光标所在像素的十六进制值，用JavaScript表示CMS.

对于Firefox来说，有一个优秀的ColorZilla扩展可以做到这一点.然而，这只是FF，当然，我真的很想提供与CMS工具.

一位荷兰开发人员使用AJAX和PHPimagecolorat()的组合来找出图像上的像素 colored颜色 .But that limits the range to images I can access server side，我真的梦想有一个通用的工具.

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，尽管跨浏览器解决方案当然是理想的.

推荐答案

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

然后用前面介绍的画布方法.如果必须能够转换为 colored颜色值的各种表示形式，请try my color.js library.

而且，你永远无法支持IE<；9(假设IE9支持画布)和使用Flash也没有帮助，因为它也无法读取文档的像素数据.

Jquery JavaScript 吸管(告诉鼠标光标下像素的 colored颜色 )

推荐答案

Jquery相关问答推荐

是否可以从不可见的 DataTables 列访问数据？

禁用提交按钮，直到所有字段都有值

如何在 jQuery 中使用：not 和 hasClass() 来获取没有类的特定元素

如何在 bootstrap 模式关闭并重新打开时重置 bootstrap 模式？

Facebook 风格的 JQuery 自动完成插件

非 AJAX jQuery POST 请求

以ajax方式在rails 3中提交表单(使用jQuery)

如何在不导致页面滚动的情况下删除位置哈希？

用 jQuery 模拟按键

如何禁用在div内单击

隐藏 div 但保留空白

！！~(不是波浪号/bang bang 波浪号)如何改变包含/包含数组方法调用的结果？

在 jQuery 中 Select 后代元素的最快方法是什么？

AngularJS：使用 jQuery 更改时，ng-model 绑定不更新

jQuery clone() 不克隆事件绑定，即使使用 on()

带有 LIKE 的 Spring JPA @Query

添加到数组 jQuery

如何使用 ID 变量在 jQuery 中 Select 元素？

jQuery中的wait()或sleep()函数？

使用 Ajax 下载并打开 PDF 文件