如何在另一个图像中找到一个图像？节点.js

Question

我有 2 个 bmp 图像。ImageA 是屏幕截图（示例） ImageB 是其中的一个子集。比如说，一个图标。

我想在 ImageA 中找到 ImageB 的 X、Y 坐标（如果存在）。

知道我会怎么做吗？

Answer 1

这称为光学识别。它可能看起来很复杂（确实如此），但在实现中可能非常简单，所以不要回避它！

让我们Image A成为我们正在寻找的图像，并Image B成为其中的更大图像Image A。

方法一

如果Image A的缩放比例Image B没有改变，并且颜色全部保留，您可以将其放置Image B在 HTML 5 画布上并遍历像素数据。您将从中加载第一行像素Image A，然后遍历Image B. 如果一个像素是相同的，你会将该像素列存储在一个变量中，并检查下一个是否也匹配。如果第一行是完全匹配，则跳到下一行并比较它们。您会重复此操作，直到匹配或命中（或足够多）不匹配的像素。在这种情况下，您将重置所有变量并重新开始寻找与第 1 行的匹配项。

方法二

如果Image A在 中不完全相同，则会Image B出现新的并发症并且事情变得更加复杂。如果只有比例发生变化，我们可以对方法 1 进行一些调整以获得有效的方法。与其抓取任何像素并查看是否有 80% 左右匹配，我们还需要跟踪图像sheer/compression。

在每一行中，逐步检查像素。例如，我们将每十个像素检查一次。如果我们找到像素 1 的匹配项，我们就会检查 10 个像素之外的像素，看看该像素是否存在于我们行中的任何位置。如果我们找到它，从 0 到该像素的距离除以 10（我们的增量）就是原始图像大多少倍。

如果我们在 0 处找到一个像素 20 个槽Image A，并且它仅相隔 10 个像素Image B（记住，10 是我们的增量），那么我们的原始图像会大 2 倍。换句话说，新图像是原始图像大小的一半。

1) compression = target_width / original_width
2) compression = 20 / 10
3) compression = 2

这是一种更复杂但稳健的检测匹配的方法。足够多的匹配行意味着您有一个匹配的图像，但是垂直拉伸呢？

类似的逻辑。如果您找到匹配的行，则从 0 开始向下减 10，然后在 中找到该像素的匹配项Image A。

编辑

我提供的方法是用于在任何其他图像中查找任何图像的通用方法。可以想象，这是性能密集型的。我不知道你想检测什么图像，但如果有常见的形状，有时你可以做替代算法。例如，如果您有一个圆，您只需检查半径外是否存在匹配的像素，以及半径内是否存在相同的像素。

我提出的方法也不能补偿翘曲。如果图像被拉伸但保持矩形比例，方法2应该没问题。例如，如果图像被扭曲成圆形，事情就会变得无限复杂。在这种情况下，我可以给出的唯一提示是检查原始半径内的像素是否匹配。