为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

梵蒂冈之花 2019-10-17 15:03:11
我正在寻找“ 吸管 ”工具,该工具为CMS提供JavaScript鼠标光标所位于的像素的十六进制值。对于Firefox,确实有出色的ColorZilla扩展。但是,它当然只是FF,我真的很想随同CMS一起提供该工具。荷兰开发人员有一个非常聪明的主意,就是结合使用Ajax和PHP imagecolorat()来找出图像上的Pixel颜色。但这限制了我可以访问服务器端的图像的范围,而我真的梦想着有一个通用工具。我将使用其中一种方法,但更希望使用跨浏览器,基于Javascript或Flash的方式,这种方式不需要服务器端摆弄,也不需要安装扩展程序。我对ColorZilla可以做的任何特定于IE的解决方案也很感兴趣-我可以只支持IE和FF,尽管跨浏览器解决方案当然是理想的。
查看完整描述

3 回答

?
手掌心

TA贡献1942条经验 获得超3个赞

JavaScript不可能克服跨域安全性。如果您知道什么像素构成了图像,那将是非常糟糕的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也无济于事,因为它也无法读取文档的像素数据。


查看完整回答
反对 回复 2019-10-17
  • 3 回答
  • 0 关注
  • 1043 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信