JavaScript吸pipe（告诉鼠标光标下像素的颜色）
我正在寻找一个“ 吸pipe ”工具，它给了我一个CMS的JavaScript的鼠标光标所在像素的hex值。
对于Firefox来说，有非常棒的ColorZilla扩展。 但是，当然只有FF，我真的很想把这个工具和CMS一起交付。
一个荷兰开发者有一个聪明的想法 ，即使用Ajax和PHP的imagecolorat()来找出图像上的像素颜色。 但是，这限制了我可以访问服务器端的图像的范围 ，我真的梦想着一个通用的工具。
我将使用这些方法之一，但更喜欢跨浏览器，基于Javascript或Flash的方式，不需要服务器端的摆弄，也不需要安装扩展。
我也对任何使用ColorZilla能做的IE特定解决scheme感兴趣 – 我可以只支持IE和FF，尽pipe跨浏览器解决scheme当然是理想的。
JavaScript不可能实现跨域安全。 如果你知道什么像素组成的图像，这将是非常糟糕的， http://some-other-host/yourPassword.png 。 如果鼠标位于同一个域的canvas或图像元素上（或者与Access-Control-Allow-Origin: *一起提供的另一个域的图像元素），则只能指示鼠标下像素的颜色。头）。 在canvas的情况下，你可以做canvasElement.getContext('2d').getImageData(x, y, 1, 1).data 。 在图像的情况下，你将不得不画他们的canvas：
var canvas = document.createElement("canvas"); canvas.width = yourImageElement.width; canvas.height = yourImageElement.height; canvas.getContext('2d').drawImage(yourImageElement, 0, 0);
然后，只需使用前面为油画解释的方法。 如果您必须能够转换为颜色值的各种表示forms，请尝试使用我的color.js库。
此外，你永远不会支持IE <9（这是假设IE9支持canvas），使用Flash将无助，因为它不能读取文档的像素数据。
合并在StackOverflow和其他网站中find的各种参考，我这样做使用JavaScript和JQuery：
<html> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script src="jquery.js"></script> <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var img = new Image(); img.src = 'photo_apple.jpg'; context.drawImage(img, 0, 0); }; function findPos(obj){ var current_left = 0, current_top = 0; if (obj.offsetParent){ do{ current_left += obj.offsetLeft; current_top += obj.offsetTop; }while(obj = obj.offsetParent); return {x: current_left, y: current_top}; } return undefined; } function rgbToHex(r, g, b){ if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); } $('#myCanvas').click(function(e){ var position = findPos(this); var x = e.pageX - position.x; var y = e.pageY - position.y; var coordinate = "x=" + x + ", y=" + y; var canvas = this.getContext('2d'); var p = canvas.getImageData(x, y, 1, 1).data; var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); alert("HEX: " + hex); }); </script> <img src="photo_apple.jpg"/> </body> </html>
这是我完整的解决scheme..在这里，我只使用canvas和一个图像，但如果您需要在图像上使用<map> ，这也是可能的。 我希望我能帮上忙
使用称为浏览器计时攻击的技术，可以（sorting）确定任何像素的颜色，即使在内嵌框架上也是如此。
基本上，这个技术测量在元素上渲染SVG滤镜的时间，而不是颜色本身（ requestAnimationFrame()允许以比setTimeout()更好的精度测量时间）。 根据当前的像素颜色，filter需要更多或更less的时间来应用。 这使得可以确定像素是否与已知颜色相同 – 例如黑色或白色。
本白皮书中的更多详细信息（pdf）： http ： //www.contextis.com/documents/2/Browser_Timing_Attacks.pdf
顺便说一句：是的，这是一个浏览器安全漏洞，但我不明白浏览器供应商如何修补它。
我同意以利亚提供的非常详细的答复。 另外，我会说，当涉及到图像时，你不需要canvas。 正如你自己所说，你有这些图像在PHP内可用，并可以做服务器上的颜色查询。
我build议你用一个外部工具来处理这个问题 – 这使得它甚至是独立于浏览器的（但是取决于操作系统）：用一个快捷方式调用一个小工具（例如在c＃中）为你做颜色查询，并提交颜色到你的服务器。 在CMS上下载工具。
我用于CMS的另一个方法是通过parsingCSS来“窃取”颜色：用例是将已经存在的网站的颜色作为调色板提供给我的应用程序：
- 我要求用户提供来自目标系统的URL–大部分是公司的主页
- 我parsing了页面以查找所有内联样式和链接样式的所有颜色定义
- （您可以轻松地将其扩展到所有参考图像）
- 结果是一个很好的调色板，所有coporate颜色可供select
也许这也是您的CMS的解决scheme？
我不知道这是否可行，但是如果您的页面是静态的，您可以保存每个页面的图像截图（或者每个浏览器/屏幕分辨率可能为一个），然后使用AJAX将光标坐标发送到服务器，并返回像素颜色与PHP的imagecolorat() 。
截取屏幕截图，你可以像这里描述的那样使用Selenium IDE 。
希望它有帮助。
添加到以前的答案 –
考虑这个问题的一种方法是，你想能够做一个1px×1px区域的屏幕截图。 捕获屏幕区域的相当常见的技术（例如从基于Web的错误报告系统中）是使用签名的Java applet和java.awt.Robot来捕获图片。 如果您对小程序进行签名，则您的用户将得到一个“您信任此应用程序”对话框（“始终信任来自此发布者的应用程序”checkbox），然后将能够使用该工具。
然后，您可以使用LiveConnect将结果传递给JavaScript（文档是旧的，但是Java小程序仍然支持），或者可以将其发布到您的服务器。 同样，您可以从JavaScript调用Java小程序。
查看新的input[type = color] HTML5元素： http : //www.w3.org/TR/html-markup/input.color.html，http : //demo.hongkiat.com/html5-form-input-type /index2.html 。
现在它至less在Chrome中起作用（在Ubuntu中testing，也适用于Windows）。 它启动操作系统提供的颜色select对话框。 如果在这个对话框中有一个吸pipe（对于Gnome来说），那么可以从屏幕上的任何一点上select一种颜色。 还没有跨浏览器，但干净和基于标准。
作为安全防范措施，您无法使用JavaScript捕获屏幕像素（因此开发人员无法拍摄个人数据快照），但是您可以在Flash中执行此操作 – 您可以使用flash.display在Flash容器中获取像素数据.BitmapData类。
看看http://www.sephiroth.it/tutorials/flashPHP/print_screen/ – 我已经在基于Flash的WYSYWIG项目中使用它来将图像保存到LAMP（PHP）服务器。
使用Flash的问题在于它不是本机在iOS设备上支持的，它现在非常stream行，值得开发。 闪光正在沿着pipe子走下去。
如果所有访问者都拥有支持canvas标签和JavaScript的最新Web浏览器，那么基于canvas的方法将是一个很好的方法。
没有内置的DOM方法来在一个特定的像素位置一般地获取DOM元素（除了图像或<canvas> ）的颜色。
因此，为了做到这一点，我们必须使用类似HTML2Canvas或DOM Panda的东西来截取我们网站的“截图”，获取用户的点击位置，并获得特定位置的“截图”的像素颜色。
使用HTML2Canvas（版本0.5.0-beta3），你可以做这样的事情：
// Take "screenshot" using HTML2Canvas var screenshotCanvas, screenshotCtx, timeBetweenRuns = 10, lastTime = Date.now(); function getScreenshot() { // Limit how soon this can be ran again var currTime = Date.now(); if(currTime - lastTime > timeBetweenRuns) { html2canvas(document.body).then(function(canvas) { screenshotCanvas = canvas; screenshotCtx = screenshotCanvas.getContext('2d'); }); lastTime = currTime; } } setTimeout(function() { // Assure the initial capture is done getScreenshot(); }, 100); // Get the user's click location document.onclick = function(event) { var x = event.pageX, y = event.pageY; // Look what color the pixel at the screenshot is console.log(screenshotCtx.getImageData(x, y, 1, 1).data); } // Update the screenshot when the window changes size window.onresize = getScreenshot;
