Page 1 of 1

Help implementing transparent GIF merging

Posted: Fri Jun 08, 2007 2:38 am
by Cabal
Hi,

I am writing a PHP-GD function for a friend which collects XBox gamer tag meta information - most importantly their avatar and merges it with a 'sig'. The problem is that the sigs are designed with irregular edges and so must be transparent GIFs (as PNGs do not appear transparent in IE6). This causes yet another problem as there is only support for 256 colours in GIF images.

My routine merges the two together making the avatar distorted due to the restrictive palette, or, if I tell it to merge them and integrate the new colours into the pallete of the image, the transparency key is changed mucking up the original design.

I am hoping that someone can shed some light on this

here are some of the bits of code that I use:

The palette to true colour image function I use first:

Code: Select all

function imagepalettetotruecolor(&$img)
		{
			if (!imageistruecolor($img))
			{
				$w = imagesx($img);
				$h = imagesy($img);
				$img1 = imagecreatetruecolor($w,$h);
				$background = imagecolorallocate($img1, 0, 0, 0);
				imagecolortransparent($img1,$background);
				imagecopy($img1,$img,0,0,0,0,$w,$h);
				$img = $img1;
			}
		}
I then run the merge

Code: Select all

imagepalettetotruecolor($im); //runs the above function on the sig
$thumb = imagecreatetruecolor(36, 36); //creates an empty avatar in true colour
imagecopyresampled ( $thumb, $pic, 0, 0, 0, 0, 36, 36, 64, 64 ); //copies and resizes the avatar onto the truecolor image
imagecopy ($im, $thumb, 19, 37, 0, 0, 36, 36); //copies the new avatar onto the sig image
imagegif($im, "cards/$username.png"); //outputs the user's sig to the filesystem.
exit();
I hope someone can help.

Thanks,

James Ravenscroft

Posted: Fri Jun 08, 2007 7:54 am
by superdezign
Last I checked, PNGs looked fine in IE6. There may have been problems with alpha values between 1 and 99, but 0 and 100 worked fine. Maybe you should ditch the gif. :wink:

Posted: Fri Jun 08, 2007 9:54 am
by Cabal
Is that so?

I have never seen a transparent PNG actually work in IE6 but I will look again. PNG would be ideal if I could get that to work.

Posted: Fri Jun 08, 2007 10:08 am
by Kieran Huggins
Binary transparency (the same kind as GIF) works fine - it's variable opacity that doesn't work in ie6.

PNG-8 is almost exactly like GIF, only better. Works everywhere.

PNG-24 is more like TIF, with alpha blending. The transparency doesn't work in IE6.

Be careful, colours shift slightly from system to system with PNG, so if you're trying to match CSS colours exactly you'll get unpredictable results. Search for "PNG gamma correction" (if memory serves) for more info.

Posted: Fri Jun 08, 2007 11:03 am
by onion2k
Kieran Huggins wrote:PNG-24 is more like TIF, with alpha blending. The transparency doesn't work in IE6.
24 bit PNG files don't have an alpha channel, you've confused them with 32 bit PNG files. This is likely because Photoshop calls them 24 bit in the Save For Web.. dialogue.

Alpha transparency does work in IE6, but only with a hack. If you look at the PHPGD logo here - http://www.phpgd.com/ - you'll see it's a 32 bit PNG file. The transparency works fine in IE6 because of this:

Code: Select all

img { behavior: url("./pngbehavior.htc"); }
It needs these two files:

http://www.phpgd.com/pngbehavior.htc
http://www.phpgd.com/images/blank.gif

It also requires that any PNG image has it's height and width attributes set.

Posted: Fri Jun 08, 2007 11:14 am
by Kieran Huggins
Thinking about that makes so much sense all of a sudden.. 24 bits for colour + 8 bits for the opacity = 32 :?

I've used "pngbehavior" and liked it, but only when the colours don't have to be dead-on.

Posted: Fri Jun 08, 2007 11:29 am
by Cabal
Right, I don't think thats going to be very convenient being as these sigs are supposed to be embedded on forums etc.

Kieran, you said that PNG-8 works with no hacks straight off? What are the pros and cons of this format as opposed to the 24 or 32 bit alternatives? Also, can PHP GD manage this format?

Thanks for being so helpful so far.

Posted: Fri Jun 08, 2007 12:53 pm
by onion2k
PNG-8 is functionally identical to GIF. It does single colour transparency, it does not have an alpha channel. PHP GD can handle it fine. Make sure you either use imagecreate() to make an 8 bit image, or imagetruecolortopallette() to convert the image to 8 bit (remembering that imagetruecolortopallette() isn't very clever and chooses all the wrong colours most of the time .. read the comments in the manual for ways around it faults).

Posted: Sat Jun 09, 2007 1:00 am
by Cabal
Great thanks onion, I'll give it a go.

What are the disadvantages of PNG-8? Is it the same GIF in only supporting a certain number of colours?

You guys are being really helpful, I only hope I can repay the favour sometime.

Posted: Sat Jun 09, 2007 7:01 am
by superdezign
Well, I'm no image expert, but I believe that when you create a palette from the available colors, it only uses the available colors. I think that palettes have a limit to the number of colors that they can have, but I doubt you'll reach the limit.

Posted: Sat Jun 09, 2007 12:14 pm
by Kieran Huggins
PNG-8 works in much the same way as GIF - it uses up to 256 "index" colours (drawn from a palette of millions), optionally including one "transparent" colour.

Pros: It's faster, smaller, royalty-free, works everywhere.

Cons: There is a slight colour shift between platforms to compensate for your colour profile (this is a feature, not a bug). Unfortunately, web browsers don't make the same compensation for rendered colours (like CSS #803065) or colours in jpgs or other files. In situations where you need a PNG to blend in PERFECTLY with some surrounding non-PNG colours, you may notice a difference.

Generally, if you want to use GIF you may as well use PNG-8, with the one previously mentioned exception.

Posted: Sat Jun 09, 2007 2:43 pm
by Cabal
Ok great,

Once again, thanks guys. I might stick around and help others at this forum to 'repay' my moral dept. This community is very useful and I would glad to be a part of it.