计算屏幕覆盖率答案

【问题标题】：Calculating screen coverage计算屏幕覆盖率
【发布时间】：2026-01-13 02:35:01
【问题描述】：

这是我的问题：我正在写一篇与网页设计相关的论文，我希望计算某些网页元素占用的图片百分比。我收集了 500 个网站的屏幕截图，我正在寻找一种方法来快速、有条不紊地计算单个元素占用的空间。

作为一个例子，我在下面附上了一个截图来说明我的想法。红色轮廓区域表示我需要测量的总区域，绿色轮廓表示突出显示的元素（在本例中为“搜索”按钮）。

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

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

【问题讨论】：

您是否在手动标记/注释这些区域？用什么工具？
建议使用 OpenCV。您可以找到绿色轮廓区域的轮廓，用findContours()确定区域并将其与整个图像的区域进行比较
你应该在截图的时候这样做，你可以很容易地用javascript得到这些数字。为此，您需要 puppeteer 或 selenium。

标签： image image-processing web-scraping screen-scraping

【解决方案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="$1"

# 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

【讨论】：