计算屏幕覆盖率

Question

这是我的问题：我正在写一篇与网页设计相关的论文，我想计算某些网页元素占据图像的百分比。我收集了 500 个网站的屏幕截图，我正在寻找一种方法来快速而有条不紊地处理它们，计算单个元素占用了多少 space。

例如，我在下面附上了一张截图来说明我的想法。红色轮廓区域表示我需要测量的总面积，绿色轮廓表示突出显示的元素（在本例中为 'Search' 按钮）。

最好的方法是什么？我正在使用 MacBook Air 运行 Mojave 10.14.5，最好使用免费软件。

编辑（回复评论）：我正在手工标记。在这种情况下，我只是在 Mac 上使用了预览工具并将标记保存在原始图像上。

Answer 1

我会用 ImageMagick 做到这一点，您可以使用 homebrew 在 macOS 上安装它，使用：

brew install imagemagick

因此，从这张使用 macOS 预览和带有透明填充的石灰绿注释的图像开始：

然后我会把这个脚本保存在我的 HOME 目录中 analyze:

#!/bin/bash

if [ $# -ne 1 ] ; then
   >&2 echo "Usage: analyze IMAGE"
   exit 1
fi

image=""

# Assume image is annotated in lime green - you can set any RGB colour with syntax like  "rgb(10,20,30)"
annocolour="lime"

# Calculate percentage of image inside annotation box, each line corresponds to a line of code:
# - make everything not lime green into black (image is just pure black with green annotation now)
# - add a 1-pixel black border for the floodfill in the next step to flow around
# - floodfill everything outside the annotation box with lime green starting at 0,0 in top-left corner
# - remove 1-pixel border we added above
# - make everything lime green into white (i.e. everything outside the annotation box becomes white)
# - invert the image so the contents of annotation box are white and everything else is black and print image name and mean, which is the percentage white

convert "$image" -fuzz 10% -fill black +opaque "$annocolour" \
   -bordercolor black -border 1                              \
   -fill "$annocolour" -draw "color 0,0 floodfill"           \
   -shave 1x1 -alpha off                                     \
   -fill white -opaque "$annocolour"                         \
   -negate -format "%f,%[fx:mean*100]\n" info:

现在，只需要一次，使该脚本可执行：

chmod +x $HOME/analyze

然后我可以计算石灰绿色注释区域内任何图像的百分比：

$HOME/analyze grab.png

示例输出

grab.png,2.85734

这意味着 2.8% 的图像在绿色框内。

如果您有 500 张 PNG 图片，您将需要这样的循环：

for f in *.png; do $HOME/analyze "$f" ; done

关键字: annotate, 注释区域, 图像, 图像处理, ImageMagick, macOS

计算屏幕覆盖率

Calculating screen coverage

screen-scraping

image

image-processing

web-scraping