PHP function for color matching a photo

scottco · 04-04-2009, 05:08 PM

Hey, folks. Very new to the site and PHP. Learned a lot already about randomizing images for background pics in CSS (i.e. random css files) and creating reflections at the bottom of an image. Great stuff. This site has been a huge help.

What I'm looking to do next is somehow analyze the colors in a particular image to then set appropriate background or text colors to match the photo. Get what I mean? I.E. if one photo has a winter-esque landscape, the colors matched to it might be shades of white, blue and grey. Another photo of a sunset over a lush valley would have much different color shades.

I'm looking for either a photo-analyzer program of some sorts or even better, something in PHP that would analyze the randomly selected photo and set background and text colors accordingly. Any thoughts on this?

Thanks.
-C.

Sakakuchi · 04-04-2009, 06:24 PM

Interesting question - I think I would start of solving it somehow like:

Problem:
Calculating the average of an picture uses quite alot of CPU-Power.
Finding an fitting color to the color we calculated from the picture.

(my) solution:
I would first of all calculate the color once, and write it to an database - so that you don't need to calculate it with each sitecall. Then I would make an table which holds colors - which harmonize to each other. Of course you should have an color-area -> on the one site.
Well and there you go, when the picture is called the first time - it will calculate its color -> select a fitting from the table you saved.

Some rough code - no even more than rough - should just give an idea what I'm talking about. (I think code explains more then words

)

And sorry had not much time - and no syntax coloring -tool available

PHP Code:


			
mysql_query(SELECT * FROM TABLE_PICTUES WHERE picturename = mypicture);
if(mysql_num_rows == 0)//picture not in DB
{
    $averageColor = getColor($imagename);
    mysql_query("INSERT INTO TABLE_PICTURES picturename, $averageColor");
    
}
    
//And now get the color from the db - and give it out.
    
    function getColor($image){
        $imagepath = 'images/myimages/' . $image;
        $src = imagecreatefromjpeg($imagepath);
        $width = imagesx($src);
        $height = imagesx($src);
        $dst = imagecreatetruecolor(1,1);
        imagecopyresampled($dst, $src , 0, 0, 0, 0, 1, 1, $width, $height);
        $color = imagecolorat($dst,0,0);
        $alpha = ($color >>24) & 0xFF;
        $red = ($color>> 16) & 0xFF;
        $green = ($color>> 8) & 0xFF;
        $blue = ($color) & 0xFF;
        imagedestroy($src);
        imagedestroy($dst);
    }

ooh yeah - and remember Im still a noob - so this could be a total mess

sjaq · 04-04-2009, 06:27 PM

Interesting idea, this post looks like it could help you: http://valokuva.org/?p=72

scottco · 04-04-2009, 07:08 PM

Great thoughts, both of you. I hadn't considered the overhead I'd be putting on the browser to do this. Stupid brain, overlooking something like that.

http://valokuva.org/?p=72 ... I think that's the way I'll go. Thanks!

-C.

jcorradino · 04-05-2009, 07:10 AM

Quote:

Originally Posted by Sakakuchi

(my) solution:
I would first of all calculate the color once, and write it to an database - so that you don't need to calculate it with each sitecall. Then I would make an table which holds colors - which harmonize to each other. Of course you should have an color-area -> on the one site.
Well and there you go, when the picture is called the first time - it will calculate its color -> select a fitting from the table you saved.

wow, that is actually pretty good. I have never worked with php image processing other than captchas. Honestly, I didnt even know you could do color matching using php, I would have always done it with javascript. Although, it is quite easy to see the strain on resources with something like this.

To OP: watch out what you use this for... if it is something that a user uploads to your site, and then you do this, it will kill your server if many users try it at the same time.

scottco · 04-10-2009, 02:20 AM

So, I got this working and furthermore, managed to include rand to generate a random image:

PHP Code:


			
<?php

//Generate random number

$random = rand(1, 17);



//////Begin Image Analysis/////



/* The original image is the average colors */

$average = new Imagick( 'images/backgrounds/' . $random . '.png');

 

/* Reduce the amount of colors to 10 */

$average->quantizeImage( 10, Imagick::COLORSPACE_RGB, 0, false, false );

 

/* Only save one pixel of each color */

$average->uniqueImageColors();

 

/* Clone the average and modulate to brighter */

$bright = $average->clone();

$bright->modulateImage ( 125, 200, 100 );

 

/* Clone the average and modulate to darker */

$dark = $average->clone();

$dark->modulateImage ( 80, 100, 100 );

 

/* Helper function to create the mini-images */

function createImages( Imagick $composite, Imagick $im )

{

    /* Get ImagickPixelIterator */

    $it = $im->getPixelIterator();

   

    /* Reset the iterator to begin */

    $it->resetIterator();

 

    /* Loop trough rows */

    while( $row = $it->getNextIteratorRow() )

    {

        /* Loop trough columns */

        foreach ( $row as $pixel )

        {      

            /* Create a new image which contains the color */

            $composite->newImage( 20, 20, $pixel );

            $composite->borderImage( new ImagickPixel( "black" ), 1, 1 );

        }

    }

}

/* This object holds the color images */

$composite = new Imagick();

 

/* Create "icons" for each palette */

createImages( $composite, $dark );

createImages( $composite, $average );

createImages( $composite, $bright );

 

/* Montage the color images into single image

   Ten images per row, three rows */

$montage = $composite->montageImage( new imagickdraw(), "10x3+0+0",

                                      "20x20+4+3>", imagick::MONTAGEMODE_UNFRAME,

                                      "0x0+3+3" );

 

/* Free some resources */

$composite->destroy();

 

/* Create an empty canvas */

$canvas = new Imagick();

$canvas->newImage( $montage->getImageWidth() + 55,

                   $montage->getImageHeight(),

                   new ImagickPixel( "white" ) );

 

/* Display the canvas as png */

$canvas->setImageFormat( "png" );

 

/* Set font size to 12 points */

$draw = new ImagickDraw();

$draw->setFontSize( 12 );

 

/* Create legends for each palette */

$canvas->annotateImage( $draw, 5, 20, 0, "Dark: " );

$canvas->annotateImage( $draw, 5, 45, 0, "Average: " );

$canvas->annotateImage( $draw, 5, 70, 0, "Bright: " );

 

/* Composite the montaged images next to texts */

$canvas->compositeImage( $montage, Imagick::COMPOSITE_OVER, 55, 0 );



/* Output the image */

header( "Content-Type: image/png" );

echo $canvas;

?>

What I can't figure out how to do is then turn around and echo out the actual image or even just some text in addition to the png palette that's created, i.e.:

PHP Code:


			
echo '<h1>Random is:[' . $random . ']</h1>';

The purpose for all of this is to generate a palette of colors that I can then select from for font and background colors in the associated stylesheet. Is there a reason I can't have multiple echo statements?

Thanks!
-C.