如何识别图像中的 UI 元素？

Question

我正在尝试制作一个自动化工具，并正在尝试一种记录屏幕截图并记录用户输入的记录类型。 这个想法是让用户拍摄快照并在“提交”按钮的快照上突出显示一个方块。 在播放过程中，程序会对打开的窗口进行截图，并通过搜索快照找到按钮的坐标。 所以我需要一种算法来搜索图像以获取按钮的精确（或非常接近）图像。 到目前为止，我发现的算法比较了图像相似性，但无法在子图像中找到它，考虑到我试图找到的“对象”将是近乎完美的匹配，对象识别算法似乎有点过分。 有任何想法吗？

Answer 1

以下工具可以帮助您：

• 预制： http : //github.com/prefab
• 西库利： http : //www.sikuli.org

Answer 2

1. 在按钮图像中找到一个明显的特征

   例如，可以使用与按钮面颜色相邻的边缘颜色或方形子图像的派生、形状或平均颜色（8x8 像素...）

2. 搜索此功能的快照

   我会使用平均颜色作为开始，因此将图像划分为N x N像素区域并计算它们的平均颜色。 如果您发现正方形的平均颜色与按钮的平均颜色相似，那么您就有可能的位置。

3. 在此之后，如果它有你的按钮，你可以蛮力攻击附近的区域

   在这个阶段不要直接比较你的颜色（可能会被抗锯齿和过滤器扭曲......）。 更好的方法是比较推导+/-某些精度。 您可以制作一个可能的按钮存在系数：

    p(x,y)=count(matching pixels) / (button pixels)

   如果它足够接近1.0那么你就找到了你的按钮。

附注。 在第 3 阶段，您可以使用灰度图像来简化事情

Answer 3

您需要的是一种高效的特征提取方法。 这取决于您要查找的内容，但假设您要查找此图像中的“发送”按钮：

这个按钮的一个特点是它在顶部和底部包括一对平行线段。 这同样适用于两个文本输入字段，但对于按钮，此偏移量正好是 17 像素。

如果您计算源图像的最大像素值及其垂直移动 17 个像素，您将得到以下结果：

“发送”按钮现在显示为水平实线。 您可以通过对图像设置阈值并寻找不间断的黑色像素序列来轻松检测到这一点。 仅供参考，这是我在应用 10px 水平运动模糊和 128 灰度阈值后获得的结果：

此过程将很快确定候选职位。 然后，您可以对这些位置进行更强大的技术，例如 2D 卷积和OCR，而不会损失太多性能。