如何检测特定区域的背景颜色？

Question

我编写了一段代码，根据图像的背景颜色放置标志，如果背景较暗，它将放置浅色标志，如果背景较亮，它将放置深色标志。问题是，如果我放置标志的角落很暗，而整个背景很亮，那么它将放置深色标志，那么我该如何解决这个问题

以下是代码：

$filename = "logo_5.png";

list($width, $height) = getimagesize($filename);
$ratio = $height/$width;

$new_width = $frame_width;
$new_height = $frame_width * $ratio;

$temp_width = $frame_width/5;
$temp_height = $temp_width * $ratio;

$luminance = get_avg_luminance($target_file,10);
            //echo "AVG LUMINANCE: $luminance<br />";

            // assume a medium gray is the threshold, #acacac or RGB(172, 172, 172)
            // this equates to a luminance of 170

            if ($luminance > 170) {

                $socials_footer = "socials_7.png";
            } else {
              $socials_footer = "socials_8.png";

            }

- wafa

---

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas - Teemu

你还可以使用CSS的mix-blend-mode作为一种轻量级的替代方案，可能会对你有所帮助。 - Ro Achterberg

请记住，任何平均亮度的计算都不会考虑图像中的热点/冷点。如果您这样做是为了确保徽标在任意背景上具有适当的对比度以实现易读性/可扫描性，则可能需要更智能的方法。 - Ro Achterberg

您可以尝试对图像进行裁剪，只留下标志将被放置的区域。然后确定该区域的平均亮度，而不是整个原始图像的亮度。如果您在浏览器中执行此操作，这将涉及大量使用画布 API。在 PHP 中，我想有一些库可用于从图像文件读取、裁剪等操作。 - timotgl

当然，还有出色的ImageMagick库，它将为您提供像getimagehistogram()这样的函数。 - Ro Achterberg

Answer 1

我知道这不是你要求的，但这是CSS的替代方案：

你可以通过CSS的mix-blend-mode实现根据背景颜色自动切换颜色，只需确保在徽标上使用此属性之前设置了body和wrappers的background-color

.logo{
    mix-blend-mode: difference;
}

• Kevin Powell 的快速 YouTube 演示：https://youtu.be/wLPIwZdo0gM
• MDN 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

- AJ Zack