获取图像中特定区域的主色：网页元素的颜色查询

Question

问题描述

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

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

一个参数应该足以控制“支配”所需的相似颜色的百分比。如果设置为100%，则不允许元素具有任何其他颜色。如果设置为50%，则元素需要填充颜色的一半。

应该有另一个参数来控制这些颜色的“容差”。如果容差更高，red也可以匹配Stackoverflow上的橙色“提问”按钮。

实施例

鉴于众所周知的Stackoverflow网页，我突出显示了要检查的页面元素： 如果具有更高的颜色容差和不太高的控制率，则以下查询应返回指定的结果：

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

我的第一个方法

最好的选择是使用color和background-color等CSS属性。但是这些不考虑图像，这是良好的颜色查询所需要的。此外，由于css选择器继承和透明度的处理，它们可能会产生困难。此外，在当前元素之上具有更高z-index的绝对定位元素可能会产生意外结果。

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

可以自动获取网页当前状态的屏幕截图（我正在使用Firefox），请参见此处：Take a screenshot with Selenium WebDriver

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

实施

在这种情况下，我不仅限于Java。 JavaScript 非常好，因为我也在JQuery的帮助下进行其他查询。表现很重要。我指望着你，我担心这是一项非常艰巨的任务。因此我需要你的意见。

更新

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

Answer 1

最简单的方法：

• 获取屏幕截图（保存在内存中）
• 剪裁截图到元素top = el.offsetTop，left = el.offsetLeft，width = el.offsetWidth，height = el.offsetHeight
• 获取裁剪图像的像素数据
• 遍历像素，得到R，G，B元素的总和，然后将总和除以像素数，得到平均值。根据约束条件测试平均颜色。

如果你真的想使用JavaScript

• 如果您打算在JavaScript中进行最终检查，可以将像素数据发送到JavaScript进行处理。
• 或者您可以向JavaScript发送裁剪图像的IMAGE URI。然后将IMG绘制到CANVAS然后使用ctx2d.getImageData（...）循环遍历像素

如果元素是IMG或具有背景图像CSS，则仅执行上述操作。只需使用颜色和背景颜色的CSS检查。