【问题标题】:Detect "overall average" color of the picture检测图片的“整体平均”颜色
【发布时间】:2011-03-28 23:09:18
【问题描述】:

我有一张 jpg 图片。

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

在工作中,我主要使用 JavaScript 和 PHP(一点 Python),因此欢迎使用这些语言的决定。也许有用于处理解决类似问题的图像的库。

我不需要动态确定图片的颜色。我只需要浏览整个图像数组并分别确定每个图像的颜色(我会记住这些信息以备将来使用)。

【问题讨论】:

  • JS 无法访问二值图像的颜色信息
  • @mplungjan,有这样一个javascript库http://www.pixastic.com/lib/docs/,他们以某种方式获取有关颜色的信息。还是我弄错了?
  • 他们使用新的Canvas 元素。
  • 看起来你发布的库只支持 HTML 5.... 并且说只有 firefox 可以支持所有功能。
  • "getImageData() / putImageData() 方法可用于 HTML5 画布元素。"

标签: php javascript python image-processing


【解决方案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 库,也可以满足您的需求。

【讨论】:

  • 让它轰轰烈烈!将$img = @imagecreatefromgif($imageFile); 更改为$img = @imagecreatefromstring(file_get_contents($imageFile));,您现在可以处理不同的图像类型...
  • 要更改的代码实际上是 @imagecreatefromjpeg($imageFile); 它目前假定您使用的是 jpgs。
  • 糟糕!感谢@JKirchartz 抓住了我的疯狂。顺便说一句,代码很棒!
  • 你会如何改变这个,对目录中的所有图片执行操作?
  • @Sycren 在stackoverflow.com/questions/3539978/…的帮助下更新了我的答案
【解决方案2】:

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

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

类似的东西。

Image color detection using python

【讨论】:

    【解决方案3】:

    真彩色图像的更短的解决方案是将其缩小到 1x1 像素大小并在该像素处采样颜色:

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

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

    【讨论】:

    • 有趣,但需要测试。
    • 注意,这需要用GD库编译PHP
    • 我猜这会创建平均色,而不是主色。
    【解决方案4】:

    结合 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); 
     }
    

    久经考验,返回十六进制字符串。

    【讨论】:

    • 为什么要四舍五入?根据我的经验,不四舍五入可以提供更精确的结果,只需return sprintf('#%02X%02X%02X', $rgb['red'], $rgb['green'], $rgb['blue']);
    • @Kevin 必须尝试一下 - 感谢您的提醒。
    • 它在特定颜色下会失败吗?
    • 第 3 行不应该引用 $scaled 而不是 $image 吗?这似乎创建了缩放图像,但从不使用它 - 而是将结果基于原始图像的 0,0 处的像素。如果我的阅读正确,您可能需要更新您的答案。
    • 在所有图像上为我返回 #000000
    【解决方案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).
    

    请参阅documentation

    【讨论】:

      【解决方案6】:
      $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 得到平均颜色的值 重新采样图像比仅缩放图像要好得多!

      【讨论】:

      • 我为此任务找到的第一个有效答案,谢谢!
      【解决方案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 毫秒。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-07-28
        • 1970-01-01
        • 2014-02-27
        • 2019-04-08
        • 2016-08-29
        • 1970-01-01
        • 1970-01-01
        • 2013-06-04
        相关资源
        最近更新 更多