我正在寻找“ 吸管 ”工具,该工具为CMS提供JavaScript鼠标光标所位于的像素的十六进制值。
对于Firefox,确实有出色的ColorZilla]扩展。但是,它当然只是FF,我真的很想随同CMS一起提供该工具。
荷兰开发人员有一个 非常聪明的主意,即结合使用Ajax和PHP imagecolorat()来找出图像上的Pixel颜色。 但这限制了我可以访问服务器端的图像的范围 ,而我确实梦想着有一个通用工具。
imagecolorat()
我将使用其中一种方法,但更希望使用跨浏览器,基于Javascript或Flash的方式,这种方式不需要服务器端摆弄,也不需要安装扩展。
我对ColorZilla可以做的任何特定于IE的解决方案也很感兴趣-我可以只支持IE和FF,尽管跨浏览器解决方案当然是理想的。
JavaScript无法实现,因为它违反了跨域安全性。如果您知道组成图像的像素,那将是非常糟糕的http://some-other- host/yourPassword.png。如果鼠标位于画布上或同一域的图像元素(或带有Access-Control-Allow-Origin: *标头的另一个域的图像元素)上,则只能告诉鼠标下方像素的颜色。对于画布,您可以这样做canvasElement.getContext('2d').getImageData(x, y, 1, 1).data。对于图像,您必须使用以下命令将它们绘制到画布上:
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也无济于事,因为它也无法读取文档的像素数据。