node.js - 获取一张图像在另一张图像中的位置

Question

我有一张显示网站的浏览器屏幕截图。现在我想找出网站(视口(viewport))的位置(相对于整个屏幕截图)。如下图中所示，带有黑色边框的矩形:

在开始图像处理之前，我可以向网站的 DOM 添加任何内容。

我已经尝试生成一个 QR 码，将其添加到视口(viewport)的左上角和右下角，然后使用 imagemagick 来确定 QR 码在更大的位置图片:

compare -metric "rmse" -subimage-search -dissimilarity-threshold "0.1" -virtual-pixel "edge" "haystack.png" "needle.png" "results.png"

但是，这需要很长时间。事实上，40分钟后我就退出了。

我使用了二维码，因为通过使用时间戳，我可以非常确定这张图片不会在网站上的其他任何地方找到。

此外，屏幕截图中 QR 码的大小是原始 QR 码大小的两倍，但我猜这是因为我的 Mac 屏幕具有 144dpi。

我正在使用node.js，所以我需要可以通过命令行执行的东西(例如imagemagick)，以便我可以从 Node 或a执行它直接 Node 模块。

我的优点是我可以在更大的图像中选择我想要搜索的图像。我想准确了解要找到的内容可能是加快进程的有用信息(但我还不知道如何使用这些信息)。

Answer 1

如果您发现子图像搜索太慢，我有一些建议您可以考虑加快搜索速度。

<强>1。缩小图像尺寸

我进行了一个小实验来测试在不同大小的干草堆中搜索不同大小的针，如下所示:

#!/bin/bash

# Create a range of haystack sizes
for h in 200 400 800; do
   # And a range of needle sizes
   for n in 10 20 40; do
      # Create haystack to search in, containing two needles
      convert -size ${h}x${h}! gradient:red-black -fill white \
              -draw "rectangle 100,100 139,139"               \
              -draw "rectangle 150,150 189,189"               \
              haystack.png
      # Create a needle this size to search for
      convert -size ${n}x${n}! xc:white needle.png

      cp haystack.png haystack_${h}x${h}.png
      cp needle.png   needle${n}x${n}.png

      # Search, measuring the time
      start=$SECONDS
      compare -dissimilarity-threshold 1.0 -metric rmse -subimage-search haystack.png needle.png null: > /dev/null 2>&1
      end=$SECONDS
      ((elapsed=end-start))
      echo Haystack:${h}x${h}, needle:${n}x${n}, time:$elapsed
   done
done

并发现大小如何影响搜索时间，如下所示:

Haystack:200x200, needle:10x10, time:2
Haystack:200x200, needle:20x20, time:2
Haystack:200x200, needle:40x40, time:2
Haystack:400x400, needle:10x10, time:8
Haystack:400x400, needle:20x20, time:8
Haystack:400x400, needle:40x40, time:10
Haystack:800x800, needle:10x10, time:33
Haystack:800x800, needle:20x20, time:36
Haystack:800x800, needle:40x40, time:47

如您所见，图像的大小有很大差异。

这是三个大小不同的干草堆，每个干草堆包含 2 个白色的“针”:

以下是 ImageMagick 认为“针”所在位置的“结果”图像:

<强>2。尽快停止

如果添加参数-similarity-threshold并将其设置为合理的值，则可以在找到第一个良好匹配后立即停止搜索 - 就像grep -m 1.

这样设置将使其停止在第一个完美匹配处(相似度为零差异):

-similarity-threshold 0.0

或者像这样设置将使它停止在第一个“非常好的匹配”

-similarity-threshold 0.05

默认设置为 1.0，它永远不会匹配，从而导致搜索继续遍及整个图像。

现在我知道您想要找到视口(viewport)的顶部和底部，这是两个匹配项，并且看起来快速仅找到第一个匹配项是不行的使用。但是孔子，他说“旋转你的形象”:-)

因此，找到您的第一个(即顶部)匹配项，然后将图像(和针)旋转 180 度并再次搜索，但这次您是从底部搜索，并且可以再次停在第一个匹配项处。 (也旋转你的结果。)

<强>3。使用您付费购买的所有可爱核心 - 并行化!

您可以将图像分割成多个部分并并行搜索，以利用您花费巨资购买的所有可爱的英特尔内核。你需要小心一点，重叠一点，这样你的针就不会跨越你切割的边界，但你所需要的只是在搜索区域添加一条与你的针宽度相同的条子......就像这样

#!/bin/bash

# Create a range of haystack sizes
for h in 200 400 800; do
   # And a range of needle sizes
   for n in 10 20 40; do
      # Create haystack to search in, containing two needles
      convert -size ${h}x${h}! gradient:red-black -fill white \
              -draw "rectangle 100,100 139,139"               \
              -draw "rectangle 150,150 189,189"               \
              haystack.png
      # Create a needle this size to search for
      convert -size ${n}x${n}! xc:white needle.png

      cp haystack.png haystack_${h}x${h}.png
      cp needle.png   needle${n}x${n}.png

      # Search, measuring the time
      start=$SECONDS
      compare -dissimilarity-threshold 1.0 -metric rmse -subimage-search haystack.png needle.png null: > /dev/null 2>&1
      end=$SECONDS
      ((elapsed=end-start))
      echo Haystack:${h}x${h}, needle:${n}x${n}, time:$elapsed

      ((a=h/2))
      ((b=h/2))
      ((c=a+n))
      ((d=b+n))
      ((e=a-n))
      ((f=b-n))
      # Measure time for parallel search, including dividing up image      
      start=$SECONDS
      convert haystack.png -crop ${c}x${d}+0+0       +repage h1.png
      convert haystack.png -crop ${a}x${b}+${a}+0    +repage h2.png
      convert haystack.png -crop ${a}x${b}+0+${b}    +repage h3.png
      convert haystack.png -crop ${c}x${d}+${e}+${f} +repage h4.png
      for p in 1 2 3 4; do
         compare -dissimilarity-threshold 1.0 -metric rmse -subimage-search h${p}.png needle.png null: > /dev/null 2>&1 &
      done
      wait
      end=$SECONDS
      ((elapsed=end-start))
      echo Parallel Haystack:${h}x${h}, needle:${n}x${n}, time:$elapsed
   done
done

您可以看到并行时间比单线程时间几乎加快了 4 倍:

Haystack:200x200, needle:10x10, time:2
Parallel Haystack:200x200, needle:10x10, time:0
Haystack:200x200, needle:20x20, time:2
Parallel Haystack:200x200, needle:20x20, time:1
Haystack:200x200, needle:40x40, time:2
Parallel Haystack:200x200, needle:40x40, time:1
Haystack:400x400, needle:10x10, time:8
Parallel Haystack:400x400, needle:10x10, time:2
Haystack:400x400, needle:20x20, time:8
Parallel Haystack:400x400, needle:20x20, time:3
Haystack:400x400, needle:40x40, time:10
Parallel Haystack:400x400, needle:40x40, time:4
Haystack:800x800, needle:10x10, time:33
Parallel Haystack:800x800, needle:10x10, time:10
Haystack:800x800, needle:20x20, time:36
Parallel Haystack:800x800, needle:20x20, time:11
Haystack:800x800, needle:40x40, time:47
Parallel Haystack:800x800, needle:40x40, time:14