Help implementing transparent GIF merging

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Cabal
Forum Newbie
Posts: 6
Joined: Mon Apr 09, 2007 4:06 am
Location: Birmingham, United Kingdom

Help implementing transparent GIF merging

Post 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
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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:
Cabal
Forum Newbie
Posts: 6
Joined: Mon Apr 09, 2007 4:06 am
Location: Birmingham, United Kingdom

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
Cabal
Forum Newbie
Posts: 6
Joined: Mon Apr 09, 2007 4:06 am
Location: Birmingham, United Kingdom

Post 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.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post 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).
Cabal
Forum Newbie
Posts: 6
Joined: Mon Apr 09, 2007 4:06 am
Location: Birmingham, United Kingdom

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
Cabal
Forum Newbie
Posts: 6
Joined: Mon Apr 09, 2007 4:06 am
Location: Birmingham, United Kingdom

Post 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.
Post Reply