views:

47

answers:

1

How would you develop something similar to what is described in this DabbleDB blog post?

+2  A: 

Just answered a kinda related SO question yesterday. Some of the concepts there, along with the resulting test code (on git hub) could be a good start.

As evolve mentions, scanning every pixel in an image (or even just the border) can be resource intensive. However, in this case (since you want to identify far more than just average color) it may be the way to go. Resizing the logo to a sane size would help reduce the server load, and shouldn't really effect the output.

Update: For these examples assume an image object has been created and $width and $height have been determined using imagesx(), getimagesize(), etc.

Background Color

The first thing we needed to do was figure out the logo’s background color. And that’s all the first version did, by using the corner pixels.

Here use imagecolorat() to find the corner colors. Alternatively, use the average border color method from the referenced answer at the top.

$color = imagecolorat($image, 0, 0); //do this for each corner
$rgb = imagecolorsforindex($image, $color); //convert each color to a RGB array
//average colors

Saturation

It turns out color theory has a way of measuring interestingness: saturation. So we pulled out an interesting color from the logo. Using the same color for the border and the text made things a bit more monotone than we wanted, so finally we decided to try and grab two interesting colors if they’re present.

You can use the RGB to HSL functions at the imagecolorsforindex() manual page along with the pixel scanning code mentioned at the top to find color values with high saturation.

Luminance

We turned again to color theory and realized we could use the border color’s luminance to decide whether black or white text was more suitable.

This SO thread lists different RGB to luminance calculations. I'm not certain what method is best (or technically correct) to convert 0-255 RGB images. But for what this is accomplishing (should the text be dark or light), I don't think it'll matter that much.

Tim Lytle
Was just about to respond with that, it should be noted that depending on the size of the image the 2nd method will be extremely server intensive.
evolve
@evolve Scanning every pixel? Intensive? Yeah, you're right. I updated the answer to reflect that. For the 'average' color problem, it's far better to just reduce to 1px.
Tim Lytle
@Tim: Great great answer man, thank you. =)
Alix Axel
@evolve: Seems like some comments / answers were deleted, but I think I got the point. Thanks for the head up! ;)
Alix Axel