Java 获取图像中特定区域的主控颜色：网页元素的颜色查询 问题描述

我正在编写一个Java应用程序，它允许程序员通过指定可见属性来查询网页上的页面元素。其中最重要也是最困难的是颜色

具体来说，我需要一种使用Selenium 2和Webdriver获取网页元素的用户可见颜色的方法。我希望能够查询颜色值（

#ff0000

）或名称（

红色

）

一个参数应该控制需要足够“占主导地位的类似颜色的百分比。如果设置为

100%

，则元素不允许有任何其他颜色。如果设置为

50%

，则元素需要一半填充颜色

应该有另一个参数来控制这些颜色的“公差”。如果公差更高，

红色

也可以与Stackoverflow上的橙色“提问”按钮匹配

例子 鉴于众所周知的Stackoverflow网页，我突出显示了要检查的页面元素： 如果颜色容差较高且控制百分比不太高，则以下查询应返回指定的结果：

color('#FFEFC6') // exact match: true
color('yellow') // match in tolerance range: true
color('orange') // true
color('blue') // false
color('green') // false

我的第一个方法 最好的选择是使用CSS属性，如

颜色

和

背景色

。但是这些并没有考虑图像，这是好的颜色查询所需要的。此外，由于css选择器继承和透明度的处理，它们可能会产生困难。此外，在当前元素上方具有较高

z索引的绝对定位元素可能会产生意外结果

给定的是要检查的网页元素。它在Webdriver的Java绑定中表示为JavaScript DOM元素（或JQuery对象）或
RemoteWebElement

可以自动截取网页当前状态的屏幕截图（我使用的是Firefox），请参见此处：

要检查的页面元素的坐标是已知的。因此，屏幕截图图像可以裁剪到该大小和区域，并以某种方式进行分析，以检查查询是否返回true或false

实施
在这种情况下，我并不局限于JavaJavaScript将非常好，因为我也在JQuery的帮助下进行其他查询。业绩很重要。我指望着你，我担心这是一项非常困难的任务。因此，我需要你的意见

更新
我通过截图和分析相关部分的像素数据解决了这个问题。这样我可以处理各种背景图像和透明度。它是Abmash框架的一部分，该框架是开源的，任何人都可以免费使用：最简单的方法：


获取屏幕截图（保存在内存中）
将屏幕截图裁剪到元素顶部=el.offsetTop，左侧=el.offsetLeft，宽度=el.offsetWidth，高度=el.offsetHeight
获取裁剪图像的像素数据
循环遍历像素，得到R、G、B元素的总和，然后将总和除以像素计数，得到平均值。根据约束条件测试平均颜色

如果你真的想使用JavaScript


如果您打算在JavaScript中进行最后的检查，那么可以将像素数据发送到JavaScript进行处理
或者您可以向JavaScript发送裁剪图像的图像URI。然后将该IMG绘制到画布上，然后使用ctx2d.getImageData（…）循环像素

仅当元素是IMG或具有背景图像CSS时，才执行上述操作。否则只需使用颜色和背景色CSS检查。
非常感谢<代码>颜色

和背景色可能很难继承css选择器。透明度也不容易处理。您对如何处理这个问题有什么建议吗？使用

颜色

和

背景色

作为后备方案的另一个缺点是：绝对定位的元素，其z索引高于当前元素，可能会产生意外的结果。你有什么办法来解决这个问题吗？