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

Question

我正在尝试制作一个自动拍照工具，并正在尝试一种拍摄屏幕截图并记录用户输入的录制。想法是让用户拍摄快照并在“提交”按钮的快照上突出显示正方形。在播放过程中，程序将对打开的窗口进行一次扫描，并通过搜索快照找到按钮的坐标。所以我需要一种算法来搜索图像以获得按钮的精确（或非常接近）图像。到目前为止我发现的算法比较图像相似但在子图像中找不到它，并且对象识别的算法看起来有点过头，因为我试图找到的“对象”将是一个接近完美的匹配。有什么想法吗？

Answer 1

1. 在按钮图片中找到一个独特的功能

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

2. 在快照中搜索此功能

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

3. 此后，如果有按钮，你可以强行攻击附近区域

   在此阶段不直接比较您的颜色（可能会被抗锯齿和滤镜扭曲...）。更好的方法是比较推导+/-的一些准确性。您可以设置可能的按钮存在系数：

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

   如果它足够接近1.0，那么您找到了按钮。

在第3阶段

PS。，您可以使用灰度图像来简化操作

Answer 2

您需要的是一种有效的特征提取方法。这取决于您要查找的内容，但我们假设您正在寻找此图片中的发送按钮：

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

如果您计算源图像的最大像素值以及自身垂直移动17个像素，则会得到这些：

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

此过程将很快识别候选位置。然后，您可以将这些位置置于更强大的技术（如2D卷积和OCR），而不会造成太多性能损失。

Answer 3

以下工具可以帮助您：

• 预制件：http://github.com/prefab
• Sikuli：http://www.sikuli.org