获取支配特定区域的彩色图像：色彩的查询网页元素 [英] Get dominating color of a specific area in an image: Color Query for Web Page Elements

问题描述

我写一个Java应用程序，可以让程序员查询指定可见属性的网页页面元素。其中最重要的，困难的是颜色

I am writing a Java application that lets programmers query for page elements on a web page by specifying visible attributes. One of the most important and difficult is Color.

要具体，我需要一种方式来获得在用户可见的颜色的使用Selenium 2和webdriver的网页元素。我希望能够查询的颜色值（＃FF0000 ）或名称（红色）。

To be specific, i need a way to get the user-visible color of web page elements using Selenium 2 and Webdriver. I want to be able to query for color values (#ff0000) or names (red).

一个参数应控制是必要的相似颜色的百分比称雄够了。如果设置为 100％元素是不允许有任何其他的颜色。如果设置为 50％元素需要被中途充满色彩。

One parameter should control the percentage of similar colors needed to be "dominating" enough. If set to 100% the element is not allowed to have any other color. If set to 50% the element needs to be halfway filled with the color.

应该有这些颜色的另一个参数来控制的宽容。凭借更高的耐受性，红色也可以搭配橙色的提问按钮，在这里＃1。

There should be another parameter to control the "tolerance" of these colors. With a higher tolerance, red could also match the orange "Ask Question" button here on Stackoverflow.

由于众所周知的＃1的网页，我强调了页面元素进行检查： 凭借较高的色容差和不太高的支配比例，下面的查询将返回指定的结果：

Given the well-known Stackoverflow web page, i highlighted the page element to check: With a higher color tolerance and a not too high domination percentage, the following queries should return the specified result:

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

我的第一个办法

最好的选择是使用CSS属性，如颜色和背景颜色。但这些没有考虑图像进去，这是需要的好气色的查询。此外，他们可能会产生，因为CSS选择器继承和透明度的处理困难。此外，绝对位置具有较高的的z-index 当前元素上面可能会产生意想不到的效果的元素。

My first approach

Best bet would be using CSS attributes like color and background-color. But these do not take images into account, which are needed for good color queries. Also, they could produce difficulties because of css selector inheritance and the handling of transparency. In addition, absolutely positioned elements with a higher z-index above the current element could produce unexpected results.

由于是网页元素进行检查。它被重新presented无论是作为JavaScript的DOM元素（或jQuery对象）或 RemoteWebElement webdriver的中的Java绑定。

Given is the web page element to check. It is represented either as JavaScript DOM element (or JQuery object) or as RemoteWebElement in the Java bindings of Webdriver.

有可能采取的网页（我使用Firefox）的当前状态进行自动截图，在这里看到：的，要考虑与硒的截图webdriver的

It is possible to take automated Screenshots of the current state of the web page (i am using Firefox), see here: Take a screenshot with Selenium WebDriver

页面元素来检查的坐标是已知的。因此，截屏图像裁剪可以到该尺寸和面积，并以某种方式分析，以检查是否查询返回true或false。

The coordinates of the page element to check are known. Therefore, the screenshot image could cropped to that size and area and be analyzed somehow to check if the query returns true or false.

我并不限于爪哇在这种情况下。 的JavaScript 将是非常好的，因为我在做其他的查询与jQuery的帮助了。性能问题。我望着你，我担心这是一个非常艰巨的任务。所以我需要你的输入。

I am not limited to Java in this case. JavaScript would be very nice because i am doing the other queries with the help of JQuery too. Performance matters. I am counting on you, i fear this is a very difficult task. Therefore i need your input.

推荐答案

最简单的方法：

• 在获取截屏（保存在内存中）
• 裁剪截图元素顶部= el.offsetTop，左= el.offsetLeft，宽度= el.offsetWidth，身高= el.offsetHeight
• 获取裁剪后的图像的像素数据
• 循环通过得到的R，G的总和的像素，乙元素然后由像素数除以总金额以获得平均值。测试平均颜色对你的约束。

如果你真的想使用JavaScript

If you really want to use JavaScript

• 您可以在像素数据，如果你打算做最后的检查在JavaScript发送到JavaScript的处理。
• 或者你也可以发送JavaScript中的图像的URI裁剪的图像。然后绘制IMG到画布然后循环通过像素与ctx2d.getImageData（...）

只有做到以上，如果该元素是一个IMG或有背景图像的CSS。只要使用颜色和背景颜色CSS检查除外。

Only do the above if the element is an IMG or a has a background-image CSS. Just use color and background-color CSS checks otherwise.

这篇关于获取支配特定区域的彩色图像：色彩的查询网页元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！