Question

i’m working on creating one PNG image from two others.

Image A and B have the same dimensions, they are both 200x400px. The final image the same.

I’m using the GD library with PHP.

So my idea was to create a PNG-24 from my original PNG-8, then use color transparency and finally copy the second image into
this new PNG-24. The problem appears in the first step anyway, when going from PNG-24 to PNG-8 with color transparency:

This is to get the original PNG-8 and it’s dimensions:

$png8 = imagecreatefrompng($imageUrl);
$size = getimagesize($imageUrl);

Now i create a new PNG and fill it’s background with a green color (not present in the images):

$png24 = imagecreatetruecolor($size[0], $size[1]);
$transparentIndex = imagecolorallocate($png24, 0x66, 0xff, 0x66);
imagefill($png24, 0, 0, $transparentIndex);

This is for making the green color transparent:

imagecolortransparent($png24, $transparentIndex);     

Then i copy the png8 into the PNG-24:

imagecopy($png24, $png8, 0, 0, 0, 0, $size[0], $size[1]);

So here’s the problem: the original PNG-8 looks good, but it has a green border surrounding the shape within the original image. It’s difficult to explain really. Seems like some part of the green background is left in the remaining PNG.

What can i do?

thanks in advance

best regards,

Fernando

Answer 1

I had some problems with png transparency before and was able to solve them with this pattern:

// allocate original image to copy stuff to
$img = imagecreatetruecolor(200, 100);

// create second image
$bg = imagecreatefrompng('bg.png');

// copy image onto it using imagecopyresampled
imagecopyresampled($img, $bg, 0, 0, 0, 0, 200, 100, 200, 100);
imagedestroy($bg);

// create third image
// do same routine
$fg = imagecreatefrompng('fg.png');
imagecopyresampled($img, $fg, 50, 50, 0, 0, 50, 50, 50, 50);
imagedestroy($fg);

// output image
imagepng($img);
imagedestroy($img);

I think the only difference between mine and yours is imagecopy() vs. imagecopyresampled(). I seem to remember having problems with that though it was quite a while ago. You can see an example of an image I use this pattern on here: http://www.ipnow.org/images/1/bggrad/bg4/yes/TRANSIST.TTF/8B0000/custombrowserimage.jpg (I allocate a blank image, copy the background image in, copy the overlay with transparency in)