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

Question

问题描述

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

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

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

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

示例

鉴于众所周知的 Stackoverflow 网页，我突出显示了要检查的页面元素： 具有较高的颜色容差和不太高的支配百分比，以下查询应返回指定的结果：

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

我的第一种方法

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

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

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

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

实施

在这种情况下，我不仅限于 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 检查。