检测图片的“整体平均”颜色

Question

我有一张jpg图片。

我需要知道这张图片的“总体平均”颜色。乍一看，可以使用图片的直方图 (通道 RGB)。

在工作中，我主要使用JavaScript和PHP（有点Python），因此希望能够用这些语言解决问题。也许有一些库可以处理类似的图像问题。

我不需要动态确定图片的颜色。我只需要遍历整个图像数组，分别确定每个图像的颜色（这些信息将被记下来以备将来使用）。

- Kalinin

---

JS无法访问二进制图像的颜色信息。 - mplungjan

@mplungjan，有一个名为 http://www.pixastic.com/lib/docs/ 的 JavaScript 库，它可以获得有关颜色的信息。我说得对吗？ - Kalinin

他们使用新的“Canvas”元素。 - Pekka

看起来你发布的库只支持 HTML 5... 而且它说只有 Firefox 可以支持所有功能。 - Dave C

HTML5画布元素提供了getImageData() / putImageData()方法。 - mplungjan

Answer 1

你可以使用PHP来获取颜色调色板的数组，如下所示：

<?php 
function colorPalette($imageFile, $numColors, $granularity = 5) 
{ 
   $granularity = max(1, abs((int)$granularity)); 
   $colors = array(); 
   $size = @getimagesize($imageFile); 
   if($size === false) 
   { 
      user_error("Unable to get image size data"); 
      return false; 
   } 
   $img = @imagecreatefromjpeg($imageFile);
   // Andres mentioned in the comments the above line only loads jpegs, 
   // and suggests that to load any file type you can use this:
   // $img = @imagecreatefromstring(file_get_contents($imageFile)); 

   if(!$img) 
   { 
      user_error("Unable to open image file"); 
      return false; 
   } 
   for($x = 0; $x < $size[0]; $x += $granularity) 
   { 
      for($y = 0; $y < $size[1]; $y += $granularity) 
      { 
         $thisColor = imagecolorat($img, $x, $y); 
         $rgb = imagecolorsforindex($img, $thisColor); 
         $red = round(round(($rgb['red'] / 0x33)) * 0x33); 
         $green = round(round(($rgb['green'] / 0x33)) * 0x33); 
         $blue = round(round(($rgb['blue'] / 0x33)) * 0x33); 
         $thisRGB = sprintf('%02X%02X%02X', $red, $green, $blue); 
         if(array_key_exists($thisRGB, $colors)) 
         { 
            $colors[$thisRGB]++; 
         } 
         else 
         { 
            $colors[$thisRGB] = 1; 
         } 
      } 
   } 
   arsort($colors); 
   return array_slice(array_keys($colors), 0, $numColors); 
} 
// sample usage: 
$palette = colorPalette('rmnp8.jpg', 10, 4); 
echo "<table>\n"; 
foreach($palette as $color) 
{ 
   echo "<tr><td style='background-color:#$color;width:2em;'>&nbsp;</td><td>#$color</td></tr>\n"; 
} 
echo "</table>\n";

这会给你一个数组，其中的值越高表示该颜色已被使用的频率越高。

编辑 一位评论者问如何在目录中使用它，以下是方法：

    if ($handle = opendir('./path/to/images')) {

        while (false !== ($file = readdir($handle))) {
           $palette = colorPalette($file, 10, 4);
           echo "<table>\n"; 
           foreach($palette as $color) { 
               echo "<tr><td style='background-color:#$color;width:2em;'>&nbsp;</td><td>#$color</td></tr>\n"; 
           } 
           echo "</table>\n";
        }
        closedir($handle);
    }

你可能不想在太多文件上执行此操作，但这是你的服务器。

或者，如果你宁愿使用Javascript，Lokesh's Color-Theif 库完全符合你的要求。

- JKirchartz

---

让它嗨起来！将 $img = @imagecreatefromgif($imageFile); 更改为 $img = @imagecreatefromstring(file_get_contents($imageFile));，现在您可以处理不同类型的图像... - Andres

糟糕！感谢@JKirchartz指出我的错误。顺便说一下，你的代码很棒！ - Andres

你会如何更改这个程序，以便对目录中的所有图片执行该操作？ - Sycren

@Sycren 在 https://dev59.com/mE_Ta4cB1Zd3GeqPFPJx 的帮助下更新了我的答案。 - JKirchartz

@ArmanGin $granularity 确定从图像中采样颜色的频率，它在 for 循环中被使用来增加 x/y 位置以确定要采样哪些像素。 - JKirchartz

Answer 2

结合JKirchartz和Alexander Hugestrand的回答:

 function getAverage($sourceURL){

    $image = imagecreatefromjpeg($sourceURL);
    $scaled = imagescale($image, 1, 1, IMG_BICUBIC); 
    $index = imagecolorat($scaled, 0, 0);
    $rgb = imagecolorsforindex($scaled, $index); 
    $red = round(round(($rgb['red'] / 0x33)) * 0x33); 
    $green = round(round(($rgb['green'] / 0x33)) * 0x33); 
    $blue = round(round(($rgb['blue'] / 0x33)) * 0x33); 
    return sprintf('#%02X%02X%02X', $red, $green, $blue); 
 }

经过试验，返回十六进制字符串。

- Johnny Rockex

---

为什么要四舍五入？根据我的经验，不进行四舍五入可以得到更精确的结果，只需return sprintf('#%02X%02X%02X', $rgb['red'], $rgb['green'], $rgb['blue']);即可。 - Kevin

@Kevin会尝试一下 - 感谢提醒。 - Johnny Rockex

它在特定的颜色上失败了吗？ - Johnny Rockex

第三行不应该引用 $image 而是 $scaled 吗？这似乎创建了缩放后的图像，但从未使用它 - 而是基于原始图像中 0,0 像素的结果。如果我的理解正确，您可能需要更新您的答案。 - Scott 'scm6079'

在所有图像上返回＃000000给我。 - ashleedawg

@ashleedawg 由于某种原因，imagescale 函数只在使用 IMG_NEAREST_NEIGHBOUR 或 IMG_BILINEAR_FIXED 调整大小算法时才能正常工作。 - andreszs

Answer 3

$img = glob('img/*');
foreach ($img as $key => $value) {
    $info = getimagesize($value);
    $mime = $info['mime'];
    switch ($mime) {
        case 'image/jpeg':
            $image_create_func = 'imagecreatefromjpeg';
            break;
        case 'image/png':
            $image_create_func = 'imagecreatefrompng';
            break;
        case 'image/gif':
            $image_create_func = 'imagecreatefromgif';
            break;
    }
    $avg = $image_create_func($value);
    list($width, $height) = getimagesize($value);
    $tmp = imagecreatetruecolor(1, 1);
    imagecopyresampled($tmp, $avg, 0, 0, 0, 0, 1, 1, $width, $height);
    $rgb = imagecolorat($tmp, 0, 0);
    $r = ($rgb >> 16) & 0xFF;
    $g = ($rgb >> 8) & 0xFF;
    $b = $rgb & 0xFF;
    echo '<div style="text-align:center; vertical-align: top; display:inline-block; width:100px; height:150px; margin:5px; padding:5px; background-color:rgb('.$r.','.$g.','.$b.');">';
    echo '<img style="width:auto; max-height:100%; max-width: 100%; vertical-align:middle; height:auto; margin-bottom:5px;" src="'.$value.'">';
    echo '</div>';

您可以通过 $r、$g 和 $b 获取平均颜色值。重新采样图像比仅缩放图像要好得多！

- antoine demacon

---

我找到了这个任务的第一个可行答案，谢谢！ - ashleedawg

Answer 4

对于真彩色图像的简短解决方案是将其缩小为1x1像素大小，并在该像素处采样颜色：

$scaled = imagescale($img, 1, 1, IMG_BICUBIC); $meanColor = imagecolorat($img, 0, 0);

...但我自己还没有测试过。

- Alexander Hugestrand

---

有趣，但需要进行测试。 - Kalinin

请注意，这需要使用GD库编译PHP。 - Jon B

我猜这会创建平均颜色，而不是主要颜色。 - Juraj.Lorinc

这个解决方案非常好，但是在使用IMG_BICUBIC作为插值模式时不起作用。我发现它产生的颜色与Gimp计算出的平均颜色相差甚远。有些模式非常糟糕，但其中许多产生类似的结果。我选择了IMG_GAUSSIAN。 - jlh

Answer 5

我创建了一个composer包，提供通过给定图像的路径选择平均颜色的库。

您可以通过在项目目录中运行以下命令来安装它：

composer require tooleks/php-avg-color-picker

使用示例：

<?php

use Tooleks\Php\AvgColorPicker\Gd\AvgColorPicker;

$imageAvgHexColor = (new AvgColorPicker)->getImageAvgHexByPath('/absolute/path/to/the/image.(jpg|jpeg|png|gif)');

// The `$imageAvgHexColor` variable contains the average color of the given image in HEX format (#fffff).

请查看文档。

- tooleks

Answer 6

从PIL开始。http://www.pythonware.com/products/pil/

打开Image对象。使用getdata方法获取所有像素。平均你得到的值。

就像这样。

使用Python进行图像颜色检测

- S.Lott

Answer 7

这里有一个使用php-vips的解决方案。它非常快速，并且会找到最常见的颜色，而不是平均颜色。

大多数照片的平均颜色都是灰色，因为这就是自动白平衡的作用。你真正想要的是出现最频繁的颜色。

该程序使用3D直方图。它创建一个10 x 10 x 10的立方体（您可以更改此值，请参见$n_bins），以表示整个RGB颜色空间，然后循环遍历图像，计算落入每个bin中的像素数。它将bin（0,0,0）中的计数设置为零（黑色通常是无趣的背景），然后搜索具有最高计数的bin。该bin的索引是最常见的RGB颜色。

这对于大多数PNG文件不起作用（您需要展开alpha通道），也不适用于CMYK文件（您需要先转换为RGB）。

#!/usr/bin/env php
<?php

require __DIR__ . '/vendor/autoload.php';
use Jcupitt\Vips;

$im = Vips\Image::newFromFile($argv[1], ['access' => 'sequential']);

# 3D histogram ... make 10 x 10 x 10 bins, so 1000 possible colours
$n_bins = 10;
$hist = $im->hist_find_ndim(['bins' => $n_bins]);

# black is usually background or boring, so set that cell to 0 counts
# fetch (0, 0, set the 0th element of that to 0, paste back
$pixel = $hist->getpoint(0, 0);
$pixel[0] = 0;
$pixel = Vips\Image::black(1, 1)->add($pixel);
$hist = $hist->insert($pixel, 0, 0);

# (x, y) pixel with the most counts
[$v, $x, $y] = $hist->maxpos();
$pixel = $hist->getpoint($x, $y);
$z = array_search($v, $pixel);

# convert indexes to rgb ... +0.5 to get the centre of each bin
$r = ($x + 0.5) * 256 / $n_bins;
$g = ($y + 0.5) * 256 / $n_bins;
$b = ($z + 0.5) * 256 / $n_bins;

echo("r = " . $r . "\n");
echo("g = " . $g . "\n");
echo("b = " . $b . "\n");

我可以这样运行它：

$ time ./try302.php ~/pics/shark.jpg 
r = 38.4
g = 38.4
b = 12.8
real    0m0.077s
user    0m0.068s
sys 0m0.016s

在这台普通笔记本电脑上，处理一个700 x 700像素的jpg图像只需要70毫秒。

- jcupitt