Possible to change a certain color in a image with GD?

Nor · 03-28-2008, 07:46 AM

(Hypothetically)Say theres just a "solid" color in a image, say a white bg with a #FF0000 red square in the middle. Is it possible to use a GD function to change FF0000 to a different color? regardless what else is in the image. In a gif file.

Salathe · 03-28-2008, 03:59 PM

Yes, it is certainly possible to look for pixels of a certain colour and change them to some other colour. imagecolorat is a good starting point.

Nor · 03-28-2008, 04:07 PM

So what if you know the "exact" color, how would I "change" that color all over the image, just that color throughout the image?

E.g...ajaxload.info

DeMo · 03-28-2008, 09:56 PM

Someone please correct me if there's an easier way, but I guess you have to traverse the image horizontally and vertically checking the color of each pixel.. if it matches the color you want to change you can do this using the function imagesetpixel.

Nor · 03-28-2008, 10:04 PM

Hmm..that might be fun.

Nor · 03-28-2008, 10:50 PM

I tried it :P

PHP Code:


			
<?php
//cleanscript.com 2008
$image = "smiley.png";
$data = getimagesize($image);
$width = intval($data[0]);
$height = intval($data[1]);
$cloneH = 0;
$hex = "FF0000";
$oldhex = "FCFF00";
$im = imagecreatefrompng($image);
$color = imagecolorallocate($im,hexdec(substr($hex,0,2)),hexdec(substr($hex,2,2)),hexdec(substr($hex,4,6)));
for($cloneH=0;$cloneH<$height;$cloneH++)
{
    for($x=0;$x<$width;$x++)
    {
        if( colormatch($im,$x,$cloneH, $oldhex) )
            imagesetpixel($im, $x, $cloneH, $color);
    }    
}
header("Content-Type: {$data['mime']}");
imagepng($im);
function colormatch($image,$x,$y,$hex)
{
    $rgb = imagecolorat($image,$x,$y);
    $r = ($rgb >> 16) & 0xFF;
    $g = ($rgb >> 8) & 0xFF;
    $b = $rgb & 0xFF;
    
    $r2 = hexdec(substr($hex,0,2));
    $g2 = hexdec(substr($hex,2,2));
    $b2 = hexdec(substr($hex,4,6));
    if( $r == $r2 && $b == $b2 && $g == $g2 )
        return true;
    return false;
    //echo "$r $r2, $g $g2, $b $b2";
}
?>

The image gets fuzzy though. http://nbbmodbase.krawp.com/imagecolorswitch/ :( how would I make it ebtter?

DeMo · 03-29-2008, 04:24 AM

It's not perfect because the image has different yellow tones near the edges and these pixels are not passing the colormatch function.

To make it better you'll need to implement a tolerance system.
The tolerance can be a value from 0 to 255 and it defines a range in which the pixels pass or not the colormatch function.

In your code you were trying to match the FCFF00 (252, 255, 0) pixels.
You have some pixels that are clearer and some that are darker than this color. To match them let's say you set a tolerance of 30.

First you calculate the color ranges.
RED
lower range: 252 - 30 = 222
upper range: 252 + 30 = 255 (because 255 is the maximum value for RGB colors)

GREEN
lower: 255 - 30 = 225
upper: 255 + 30 = 255 (same reason as red)

BLUE
lower 0 - 30 = 0 (because you can't have a negative value for RGB colors)
upper: 0 + 30 = 30

FINAL COLOR
lower: (222, 225, 0) = #DEE100 (reference)
upper: (255, 255, 30) = #FFFF1E (reference)

Now for each pixel in the image your colormatch function is going to check if the pixel color is between those two tones, if it is.. you change it's color.

One thing to note is that different tones are used in the image edges to achieve a smoothing effect. Using a tolerance system you can match those pixels, but if you change all of them to the same color you're still going to miss some quality at the edges.

Nor · 03-29-2008, 02:30 PM

So wait, the edges, say I change it to a different color right? to have that "same" effect towards the edges, do I process the same style? To make the image seem smooth