PNG Overlapping Problem

[Kryptix]

I have 2 PNG images that are the same size and both have transparent backgrounds. The first image is a head which should fit perfectly on the second image (the body).

 

This code works fine on my friends Linux system, but on my system the body just overlaps the head making it white

 

<?php
header('Content-type: image/png');

$canvas = imagecreatetruecolor(64, 102);

$head = imagecreatefrompng('head.png');
$body = imagecreatefrompng('body');


imagecopy($canvas, $head, 0, 0, 0, 0, 64, 102);
imagecopy($canvas, $body, 0, 0, 0, 0, 64, 102);

imagecolortransparent($canvas, imagecolorallocate($canvas, 0, 0, 0)); // Remove black background

imagepng($canvas);
imagedestroy($canvas);
?>

 

[voip03]

Check this site

http://koivi.com/ie-png-transparency/

[Kryptix]

Check this site

http://koivi.com/ie-png-transparency/

I'm not sure what I'm meant to be looking at, I can't find anything on there that would help?

 

The images I'm using are:

 

 

The above code works fine on my friends Ubuntu install but not on my Windows install. What am I doing wrong?

[Kryptix]

Anyone?

[xtopolis]

Copy pasting the official Example 1 on this page and changing it to fit your images, and the right x/y coordinates and opacity, I was able to get it to work as intended.

 

http://www.php.net/manual/en/function.imagecopymerge.php

 

<?php
$dest = imagecreatefrompng('body.png');
$src = imagecreatefrompng('head.png');

// Copy and merge
imagecopymerge($dest, $src, 0, 0, 0, 0, 64, 102, 100);

// Output and free from memory
header('Content-Type: image/png');
imagepng($dest);

imagedestroy($dest);
imagedestroy($src);
?>

[Kryptix]

Brilliant, that works perfect -- thanks!

 

One more problem, I have 2 types of PNG, one is for the character and the other type of the items they're wearing. It seems that the PNG's have been generated differently and although this PNG appears transparent it just overlaps the existing image.

 

 

When I load the first set of images into Photoshop they appear to have a black background even though they're transparent when viewing them in Windows and when you open the above image it opens as transparent, so there's clearly something different in how they're generated or saved.

 

Can anyone tell me how to overcome this?

 

Here's the code. It works fine until the last one (armour) and then it's overlapped and just shows the one image:

 

<?php
header('Content-type: image/png');
$canvas = imagecreatetruecolor(64, 102);
imagecolortransparent($canvas, imagecolorallocate($canvas, 0, 0, 0));

$body = imagecreatefrompng('body.png');
imagecopymerge($canvas, $body, 0, 0, 0, 0, 64, 102, 100);

$head = imagecreatefrompng('head.png');
imagecopymerge($canvas, $head, 0, 0, 0, 0, 64, 102, 100);

$armour = imagecreatefrompng('armour.png');
imagecolortransparent($armour, imagecolorallocate($armour, 255, 255, 255));
imagecopymerge($canvas, $armour, 0, 0, 0, 0, 64, 102, 100);		

imagepng($canvas);

imagecanvasroy($canvas);
imagecanvasroy($src);
?>

[xtopolis]

This example might get you some of the way there, but I don't have time to read up on the GD library right now.  Hopefully this might get you a little closer to your answer.  This is probably not the best way; I'm just trying to get it to work in general.

<?php
$body 	= imagecreatefrompng('body.png');
$head 	= imagecreatefrompng('head.png');
$armour	= imagecreatefrompng('armour.png');

//innermost->outermost
imagecopymerge($head, $body, 0, 0, 0, 0, 64, 102, 100);
imagecopymerge($armour, $head, 0, 0, 0, 0, 64, 102, 100);

header('Content-Type: image/png');
imagepng($armour); //last image used

//cleanup
imagedestroy($body);
imagedestroy($head);
imagedestroy($armour);
?>

 

If there are a reasonably finite number of combinations, I would recommend you generate them ahead of time, and just access the based on a mask of some sort.

[Kryptix]

It works but the thing is, I'm overlapping up to 20 PNG images in one go through a function called add_sprite() like so:

 

function add_sprite($loc) {
global $char_image;
   
$spr_add = imagecreatefrompng($loc);
imagecopymerge($char_image, $spr_add, 0, 0, 0, 0, 64, 102, 100);
imagedestroy($spr_add);
}

 

With your way I don't see how I can do it because it's a different set and amount of images each time. All you're doing is putting the non-transparent item at the bottom and then the head on top. The problem is the item isn't properly transparent.

 

Thanks so much for your help so far.

 

Is there anyway to see what the difference is between the two PNG's? As I said the first batch work fine, it's just the items that are causing a problem as they've been generated differently.