2012-04-24 88 views
20

我試圖複製Dribbble.com檢測圖像中主要顏色的功能。在下面的圖片中,您可以看到來自Dribbble.com的屏幕截圖,其中顯示了左側圖像中的8種主要顏色。這裏是圖像中的實際頁面http://dribbble.com/shots/528033-Fresh-Easy?list=following使用PHP檢測圖像中的主要顏色

我需要能夠在PHP中做到這一點,一旦我得到了我需要的顏色,我將它們保存到數據庫,因此無需在每個頁面上運行處理加載。

經過一些關於如何從圖像中獲取這些顏色的研究之後,有人說你只是逐個像素地檢查一個圖像,然後保存發生最多的顏色。其他人表示,還有更多,並且獲得最常見的顏色不會產生理想的效果。他們說你需要對圖像/顏色進行量化(我現在已經迷失了)。

在下面的運球鏡頭下方是一個JavaScript庫,做同樣的事情,該頁面可以在這裏http://lokeshdhakar.com/projects/color-thief/

查看查看該網頁,我可以看到有一個名爲quantize.js JavaScript文件的源圖像和結果非常好。所以,我希望能夠做什麼的Javascript庫做,但使用PHP和GD/ImageMagick的

enter image description here


我找到了這個功能,將與PHP返回的顏色和計數的圖像但結果是從JavaScript版本以上的不同和運球結果

/** 
* Returns the colors of the image in an array, ordered in descending order, where the keys are the colors, and the values are the count of the color. 
* 
* @return array 
*/ 
function Get_Color() 
{ 
    if (isset($this->image)) 
    { 
     $PREVIEW_WIDTH = 150; //WE HAVE TO RESIZE THE IMAGE, BECAUSE WE ONLY NEED THE MOST SIGNIFICANT COLORS. 
     $PREVIEW_HEIGHT = 150; 
     $size = GetImageSize($this->image); 
     $scale=1; 
     if ($size[0]>0) 
     $scale = min($PREVIEW_WIDTH/$size[0], $PREVIEW_HEIGHT/$size[1]); 
     if ($scale < 1) 
     { 
      $width = floor($scale*$size[0]); 
      $height = floor($scale*$size[1]); 
     } 
     else 
     { 
      $width = $size[0]; 
      $height = $size[1]; 
     } 
     $image_resized = imagecreatetruecolor($width, $height); 
     if ($size[2]==1) 
     $image_orig=imagecreatefromgif($this->image); 
     if ($size[2]==2) 
     $image_orig=imagecreatefromjpeg($this->image); 
     if ($size[2]==3) 
     $image_orig=imagecreatefrompng($this->image); 
     imagecopyresampled($image_resized, $image_orig, 0, 0, 0, 0, $width, $height, $size[0], $size[1]); //WE NEED NEAREST NEIGHBOR RESIZING, BECAUSE IT DOESN'T ALTER THE COLORS 
     $im = $image_resized; 
     $imgWidth = imagesx($im); 
     $imgHeight = imagesy($im); 
     for ($y=0; $y < $imgHeight; $y++) 
     { 
      for ($x=0; $x < $imgWidth; $x++) 
      { 
       $index = imagecolorat($im,$x,$y); 
       $Colors = imagecolorsforindex($im,$index); 
       $Colors['red']=intval((($Colors['red'])+15)/32)*32; //ROUND THE COLORS, TO REDUCE THE NUMBER OF COLORS, SO THE WON'T BE ANY NEARLY DUPLICATE COLORS! 
       $Colors['green']=intval((($Colors['green'])+15)/32)*32; 
       $Colors['blue']=intval((($Colors['blue'])+15)/32)*32; 
       if ($Colors['red']>=256) 
       $Colors['red']=240; 
       if ($Colors['green']>=256) 
       $Colors['green']=240; 
       if ($Colors['blue']>=256) 
       $Colors['blue']=240; 
       $hexarray[]=substr("0".dechex($Colors['red']),-2).substr("0".dechex($Colors['green']),-2).substr("0".dechex($Colors['blue']),-2); 
      } 
     } 
     $hexarray=array_count_values($hexarray); 
     natsort($hexarray); 
     $hexarray=array_reverse($hexarray,true); 
     return $hexarray; 

    } 
    else die("You must enter a filename! (\$image parameter)"); 
} 

於是我問,如果有人知道我該怎麼做這樣的任務用PHP?可能已經存在的東西已知,或者有任何提示讓我更近一步做到這一點,將不勝感激

+0

http://stackoverflow.com/questions/3468500/detect-overall-average-color-of-the-picture – 2012-04-24 00:43:27

+0

@aSeptik它看起來像我已經發布的代碼一樣 – JasonDavis 2012-04-24 00:50:52

+0

您是否嘗試過搜索谷歌的「」從圖像獲取調色板「'我創建了很多結果;只是問... – 2012-04-24 00:52:49

回答

24

這裏是您尋找什麼在PHP中:https://github.com/thephpleague/color-extractor

例子:

require 'vendor/autoload.php'; 

use League\ColorExtractor\Client as ColorExtractor; 

$client = new ColorExtractor; 

$image = $client->loadPng('./some/image.png'); 

// Get the most used color hexadecimal codes from image.png 
$palette = $image->extract(); 
+0

這看起來像一個C端口的好的候選人:) – quickshiftin 2016-01-28 04:53:23

3

您鏈接到的頁面有鏈接到GitHub上的源代碼,所以如果你想知道它們究竟是如何在做你可以在PHP中複製它們的源代碼。

他們如何做以及如何做這件事之間的最大區別是他們正在使用羣集來查找顏色。它們不是在存儲顏色時舍入顏色,而是將所有原始顏色存儲在數組中。然後他們遍歷這個數組,直到他們找到一個聚類中具有最高點數的聚類與聚類中的顏色數量。這個中心點是最常見的顏色。調色板然後由下一組最高集羣定義,其中一些邏輯防止集羣幾乎完全重疊。

5

這是我簡單的方法來獲得圖像的主色

<?php 

    $image=imagecreatefromjpeg('image.jpg'); 
    $thumb=imagecreatetruecolor(1,1); imagecopyresampled($thumb,$image,0,0,0,0,1,1,imagesx($image),imagesy($image)); 
    $mainColor=strtoupper(dechex(imagecolorat($thumb,0,0))); 
    echo $mainColor; 

?> 
5

你需要縮小圖片,你會得到圖片的主要顏色。如果托盤需要4種顏色,請將其縮小至約8x8,6種顏色至約12x8等等......

imagecopyresized爲縮小圖像,然後檢查每一個像素,並將它們存儲在陣列imagecolorat($image,px,py)

嘗試了這一點

<?php 

// EXAMPLE PICTURE 
$url='https://www.nordoff-robbins.org.uk/sites/default/files/google.jpg'; 

//var_dump(getColorPallet($url)); 

echoColors(getColorPallet($url)); 


function echoColors($pallet){ // OUTPUT COLORSBAR 
    foreach ($pallet as $key=>$val) 
     echo '<div style="display:inline-block;width:50px;height:20px;background:#'.$val.'"> </div>'; 
} 

function getColorPallet($imageURL, $palletSize=[16,8]){ // GET PALLET FROM IMAGE PLAY WITH INPUT PALLET SIZE 
    // SIMPLE CHECK INPUT VALUES 
    if(!$imageURL) return false; 

    // IN THIS EXEMPLE WE CREATE PALLET FROM JPG IMAGE 
    $img = imagecreatefromjpeg($imageURL); 

    // SCALE DOWN IMAGE 
    $imgSizes=getimagesize($imageURL); 

    $resizedImg=imagecreatetruecolor($palletSize[0],$palletSize[1]); 

    imagecopyresized($resizedImg, $img , 0, 0 , 0, 0, $palletSize[0], $palletSize[1], $imgSizes[0], $imgSizes[1]); 

    imagedestroy($img); 

    //CHECK IMAGE 
    /*header("Content-type: image/png"); 
    imagepng($resizedImg); 
    die();*/ 

    //GET COLORS IN ARRAY 
    $colors=[]; 

    for($i=0;$i<$palletSize[1];$i++) 
     for($j=0;$j<$palletSize[0];$j++) 
      $colors[]=dechex(imagecolorat($resizedImg,$j,$i)); 

    imagedestroy($resizedImg); 

    //REMOVE DUPLICATES 
    $colors= array_unique($colors); 

    return $colors; 

} 
?> 

工作非常適合我。

+0

這是一個很好的獲取顏色的輕量級示例。有沒有辦法將其限制爲最常用的顏色。例如,前8位在圖像中使用了顏色? – JasonDavis 2017-03-11 04:03:21

0

試試這個:http://www.coolphptools.com/color_extract

工程與JPEG和PNG。

而且最好!:與作曲家沒有喧囂,只是require_once

require_once 'colorextract/colors.inc.php'; 
$ex=new GetMostCommonColors(); 
$num_results=20; 
$reduce_brightness=1; 
$reduce_gradients=1; 
$delta=24; 
$colors=$ex->Get_Color('image.png', $num_results, $reduce_brightness, $reduce_gradients, $delta); 
print_r($colors); 

給你這樣的事情:

陣列( [3060a8] => 0.55827380952381 [f0a848] => 0.19791666666667 => 0.069642857142857 [483018] => 0.02047619047619 [786018] => 0.01827380952381 [183060] => 0.01797619047619 [4878a8] => 0.016011904761905 [181800] => 0.015119047619048 [a87830] => 0.014345238095238 [a8c0d8] => 0.011904761904762 [6090c0] => 0.01172619047619 [d89030] => 0.011011904761905 [90a8d8] => 0.0071428571428571 [FFFFFF] => 0.0070238095238095 [604830] => 0.006547619047619 [F0F0F0] => 0.0063095238095238 [d8d8f0] => 0.005297619047619 [c0d8d8] => 0.0044047619047619 [f0f0ff] => 0.00041666666666667 [181830] => 0.00011904761904762)

我試過用不同的圖像,它似乎可靠。