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

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

我的第一个方法

最好的选择是使用CSS属性，如color和background-color。但是它们不考虑图片，而对于好的颜色查询，图片是必需的。此外，由于css选择器继承和透明度处理的原因，它们可能会产生困难。另外，具有较高z-index的绝对定位元素可能会产生意外结果。

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

可以拍摄当前网页的自动化截图（我正在使用Firefox），请参见这里：Selenium WebDriver拍摄屏幕截图

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

实现

在这种情况下，我并不局限于Java。 JavaScript 非常好，因为我也是用JQuery来进行其他查询的。性能很重要。我指望你了，我担心这是一项非常困难的任务。因此，我需要你的输入。

更新

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

- Alp

Answer 1

最简单的方法：

• 获取屏幕截图（保存在内存中）
• 将屏幕截图裁剪到元素的顶部=el.offsetTop，左侧=el.offsetLeft，宽度=el.offsetWidth，高度=el.offsetHeight
• 获取裁剪图像的像素数据
• 循环遍历像素，获取R、G、B元素的总和，然后将总和除以像素数得到平均值。将平均颜色与您的限制进行比较。

如果您真的想使用JavaScript

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

仅当元素是IMG或具有background-image CSS时才执行上述操作。否则，只需使用颜色和background-color CSS检查即可。

- Louis Ricci

---

非常感谢。在 CSS 选择器继承方面，color 和 background-color 可能会比较困难。透明度也不容易处理。你有什么建议如何处理这些问题吗？ - Alp

在使用 color 和 background-color 作为回退的情况下，另一个缺点是：具有更高 z-index 的绝对定位元素会产生意外结果。你有看到任何解决方法吗？ - Alp