converting one color in a png image to another

[james438]

Here is the code I am using:

<?php
header('Content-type: image/png');
$filename = 'http://www.animeviews.com/images/pops/imperium_logo2.png';
$im = imagecreatefrompng($filename); 
imagetruecolortopalette($im, false, 255);
$ig = imagecolorat($im, 0, 0);
imagecolorset($im, $ig, 0, 255, 0);
imagepng($im, null, 100);
?>

With minor modifications I can get this to convert a color in a jpg image to another color, but trying to do the same with a png image just is not working. The png image is solid black and solid white, but all I create is a pure white image. Using ImageMagik I was able to confirm that this is a png image. My hosting service also uses a very old version of ImageMagik, which is fun to play around with now and then.

[djr33]

Why are you converting to pallette? That might be the problem.

[james438]

It might be the problem, but not converting true color to palette seems to not affect anything either. The image just ends up with the correct dimensions, but pure white. I used it because I am pretty sure it was needed for the jpg image I was playing around with earlier.

The image does test as true color. If I do not need to convert true color to palette where will the palette come from?

here is the image I am working with:

My goal is to make the white color transparent.

[djr33]

I now see what you mean. I'm not sure how this instance would work.

There's a bigger problem though: that image is not black and white. It's black and white and lots of fuzzy grays around the edges where it has been anti-aliased. To make it properly transparent you would need to go pixel by pixel and map the red value (or green or blue-- they're equal, being shades of grey) to the transparency (alpha) value, then reset all three RGB colors to 0, so that the base is black and it's semi-transparent to the levels of how white it used to be. This is also called a luma matte or luma key.


The way I'd approach this in PHP is to create a y loop inside an x loop so that you go pixel by pixel, for each setting it as described above.

Is your goal to just make this one image have a transparent background or do you need this to be a dynamic PHP process?

I could do it for you if you just need this image. If you need a PHP script, be aware that it will be a slow process and it will significantly delay loading times for the images and also be strenuous on your server, depending on image size and your server's ability.

[james438]

I am interested in learning how to do it. I can use the GD library to create text or a shape on a transparent background, but with this image trying to work with the dragon aspect may be a bit difficult. If the dragon were not there I could just do a close approximation with text over a transparent background.

I'll use GD and see how it looks when I transform it into a true b&w image.

[james438]

I converted it to the jpg format and it works fine. Converting it to two colors kind of pixelated it a little though. When I removed imagecolortopalette the script did not work. At least now I know that the problem has something to do with the image format. I am going to try and tinker with this a little bit more.

[james438]

Figured it out.

I do not know why, but the quality and destination parameters need to be left out if it is a png image.

<?php 
header('Content-type: image/png'); 
$filename = 'http://www.animeviews.com/images/pops/imperium_logo2.png'; 
$im = imagecreatefrompng($filename);  
imagetruecolortopalette($im, false, 255); 
$ig = imagecolorat($im, 0, 0); 
imagecolorset($im, $ig, 0, 255, 0); 
imagepng($im); 
?>

The above will replace white with green.

[djr33]

Ah, that's a simple answer. Sorry I didn't notice it earlier.

The path parameter is valid for png, but the quality is irrelevant-- pngs are by default full quality. The quality parameter only exists for the imagejpeg() function. The others don't have a 3rd parameter like that.

[james438]

Thanks, I was wondering why that was not working for png, but considering the nature of the format, though, that makes sense.

For fun for others, the following will take a png image, analyze the color at location 0,0 of the image or the top left corner and replace that color throughout the image with the color green, reanalyze the color at the top left corner and change the green to transparent, save the image at 'test1.png' and then display that newly created image with an orange background.

<?php
$filename = 'http://www.animeviews.com/images/pops/image.png';
$im = imagecreatefrompng($filename);
imagetruecolortopalette($im, false, 255);
$ig = imagecolorat($im, 0, 0);
imagecolorset($im, $ig, 0, 255, 0);
$ig = imagecolorat($im, 0, 0);
imagecolortransparent($im, $ig);
$dest="test1.png";
imagepng($im,$dest);
?><div style='background-color:orange;position:absolute;'><img src='test1.png'></div>

Tadaa!