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

我正在寻找一个“吸管”工具,它给出了鼠标光标所在像素的十六进制值,用于CMS的JavaScript.

对于Firefox,有一个非常出色的ColorZilla扩展.但是,它当然只是FF,我真的很想将这个工具与CMS一起提供.

荷兰开发人员已经使用了Ajax和PHP的imagecolorat()组合的very clever idea来找出图像上的Pixel颜色.但这限制了我可以访问服务器端的图像的范围,我真的梦想着一个通用的工具.

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

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

解决方法:

使用JavaScript是不可能的,因为它违反了跨域安全性.如果您知道像素构成了什么像素,那将是非常糟糕的,http：//some-other-host/yourPassword.png.如果鼠标位于画布上或同一域的图像元素(或使用Access-Control-Allow-Origin提供的另一个域的图像元素),则只能告诉鼠标下像素的颜色：*头).在canvas的情况下,你会做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也无济于事,因为它无法读取文档的像素数据.

标签：javascript,jquery,colors,selection,color-picker
来源： https://codeday.me/bug/20190915/1806403.html