Question

Just for fun I’ve been looking at how to use the GD library to create a colour palette from an image. So far I’ve used GD to resize a user uploaded image to an appropriate size for displaying on a webpage.

Now I’d like to be able to get about five or so different colours from the image that represent the range of colours present in it. Once I’ve done that I’d like to generate a complementary palette based upon those colours, which I can then use to colour different elements on the page.

Any help I can get about how I would find the initial colour palette would be much appreciated!

EDIT:
I’ve come to my own solution which you can see below.

Answer 1

Well I’ve spent a couple of days fiddling around and this is how I managed to build my colour palette. Its worked fairly well for me and you can change the size of the colour palette to return more or less colours from the image.

// The function takes in an image resource (the result from one
// of the GD imagecreate... functions) as well as a width and
// height for the size of colour palette you wish to create.
// This defaults to a 3x3, 9 block palette.
function build_palette($img_resource, $palette_w = 3, $palette_h = 3) {
    $width = imagesx($img_resource);
    $height = imagesy($img_resource);

    // Calculate the width and height of each palette block
    // based upon the size of the input image and the number
    // of blocks.
    $block_w = round($width / $palette_w);
    $block_h = round($height / $palette_h);

    for($y = 0; $y < $palette_h; $y++) {
        for($x = 0; $x < $palette_w; $x++) {
            // Calculate where to take an image sample from the soruce image.
            $block_start_x = ($x * $block_w);
            $block_start_y = ($y * $block_h);

            // Create a blank 1x1 image into which we will copy
            // the image sample.
            $block = imagecreatetruecolor(1, 1);

            imagecopyresampled($block, $img_resource, 0, 0, $block_start_x, $block_start_y, 1, 1, $block_w, $block_h);

            // Convert the block to a palette image of just one colour.
            imagetruecolortopalette($block, true, 1);


            // Find the RGB value of the block's colour and save it
            // to an array.
            $colour_index = imagecolorat($block, 0, 0);
            $rgb = imagecolorsforindex($block, $colour_index);

            $colour_array[$x][$y]['r'] = $rgb['red'];
            $colour_array[$x][$y]['g'] = $rgb['green'];
            $colour_array[$x][$y]['b'] = $rgb['blue'];

            imagedestroy($block);
        }
    }

    imagedestroy($img_resource);
    return $colour_array;
}