GD png transparency...

[ashley526]

I've asked this question a LONG time ago... I was thinking maybe someone now would know a thing or two about this. Whatever you know is more then me! LOL

Anyway I am trying to make a php image on the fly with the GD library. I am also using png format. So please someone let me know what i am doing wrong. This is what I do...

Create the graphic using a certian base color as the marked transparency, use the photo editing software to create the transparent color. It end up transparent.. but when I go to put it on a php page it shows up regular! I put it through the code and it turns it white. LOL Well that's not transparent obviously.... I can't really share my full code as it's copy righted, but I didn't know if anyone here would know if this looks right/wrong, or if any of the steps I said above are totally wrong.

Here is some of the code I have to make the colors and image transparent:

function colorallocate($im,$color){
	$color = str_replace('#','',$color);
                $white = imagecolorallocate($im,255,255,255);
	$red   = hexdec(substr($color,0,2));
                $green = hexdec(substr($color,2,4));
	$blue  = hexdec(substr($color,4,6));
                return ImageColorAllocate($im,$red,$green,$blue);
                imagecolortransparent($im,255,255,0);

}

Any ideas? I really really appriciate it... I looked at the imagecolortransparent code in the manual but there were no examples. 🙁

Thanks!! Ashley

[Weedpacket]

The most obvious problem I see is that your function returns before it ever gets around to assigning a transparent colour.

The other problem is that you're supposed to use imagecolorallocate() to specify which colour is to be treated as transparent, and use the colour index returned by that for imagecolortransparent().

$magic_yellow = imagecolorallocate($im, 255,255,0);
imagecolortransparent($im, $magic_yellow);

Then return.

[ashley526]

You are right, and I did try something like that although just calling it yellow... let me get the code I ended up with and show you. It would take the image and just turn the transparent color to white... hmmn almost there tho. lol

[ashley526]

Okay here is what I had, i also tried the alpha blending hoping that would work. 🙁

$color = str_replace('#','',$color);
$white = imagecolorallocate($im,255,255,255);
$transColor = imagecolorallocate($im,255,255,0);
$red   = hexdec(substr($color,0,2));
$green = hexdec(substr($color,2,4));
$blue  = hexdec(substr($color,4,6));
return ImageColorAllocate($im,$red,$green,$blue);
imagecolortransparent($im, $transColor); 
ImageAlphaBlending($base, true);

[Weedpacket]

You're still returning too soon.

function colorallocate($im,$color){
$color = str_replace('#','',$color);
$white = imagecolorallocate($im,255,255,255);
$transColor = imagecolorallocate($im,255,255,0);
imagecolortransparent($im, $transColor);
$red   = hexdec(substr($color,0,2));
$green = hexdec(substr($color,2,4));
$blue  = hexdec(substr($color,4,6));
$colour_index = ImageColorAllocate($im,$red,$green,$blue);
// $base? What's that?
// This isn't really relevant, here.
// ImageAlphaBlending($base, true);
return array($transColor, $colour_index);
}

I'm having to return two colour indexes, one for the colour you allocated, and one for the transparent colour you allocated; I'm pretty sure you don't want to allocate and reallocate the same same transparent colour every single time you allocate any other colour, but that's what will happen if you continue to have the transparent colour allocation inside the function for allocating every other colour.

[ashley526]

Okay I corrected to what you had and it's still going white.

Question... do I put the transparent color as the color I set it to in my photo editor? (ie yellow) or do I set it to the teal color that it assigns to the png image once it goes onto the web page?

As of right now I have it to the yellow color and it is just turning it white. Hmmmn.

I will post some pics here in a bit to show you what I mean...

Thanks again!

[ashley526]

Okay well this is the image I get, no matter what color I try to put as the assigned transColor.

Thing is it'll show up as looking trans when you click on it, but believe me it's white....

Here is the image before it goes through the code:

[Weedpacket]

Could I see a copy of the image with the yellow colour? I think I'm getting confused; your generated image looks fine to me, with transparency and all.

[ashley526]

Wow, I wonder if it's a firefox that allows it?

I am using IE, and it shows white for me... let me take a screen capture... The image once put on the net doesn't show yellow because I guess I do the png transparency option through psp. I assign yellow as the transparent color and then it will show as transparent, except when I put it as an image on the site. Then it's that teal color.

Although one weird thing, the little slider it will show teal but then go transparent as you show above. weird!

Okay let me take pics of the screen I see. It might just be an issue with the IE, eh? Although I know other things that are similar to this work on my IE with the transparency so there must be a way.

[neerav]

Aren't png's truecolor? And transparency a feature of indexed color (gifs)?

Interested in the topic, but very confused.... 😕

[ashley526]

For the png I can take my psp8 and assign a color for transparency, and it'll do similar to what the gif does. Although not quite. LOL

It reqlly is confusing and my computer froze up on me before I could get those screen captures. I'll have to try that now. 🙂

[Weedpacket]

Originally posted by ashley526
Okay let me take pics of the screen I see. It might just be an issue with the IE, eh? Although I know other things that are similar to this work on my IE with the transparency so there must be a way.

That's most likely it; IE has the worst PNG support of any browser that claims to support PNG.

But you're right; I'm pretty sure even IE can handle palette-based PNGs with a single transparent colour.

Ah, but you're using a truecolour image, I see now; and if you want to use as many as 795 colours, it will have to stay a truecolour image.

Here's a trick: before output: call [man]imagetruecolortopalette[/man] on it and get it down to a 256-colour palette-based image. (Do it with dithering turned on).

And nag Microsoft about them getting their browser fixed 🙂

[Weedpacket]

Originally posted by neerav
Aren't png's truecolor? And transparency a feature of indexed color (gifs)?

PNG was developed ten or so years ago as a replacement for GIF. It can do everything GIF can do except animation (that's MNG).

http://www.libpng.org/pub/png/

[ashley526]

I know I am your basic php loser. LOL

Do you start a whole new function with this or do you just add it on the end. I only see one example on that page and it isn't making sense to me yet.

Although I screwed up my code somehow now and I don't get any image now! hahaha So I gotta work on what I did before I can even move forward with this step. lol

[ashley526]

Okay I uploaded a fresh code it worked, then I added the functions that I did before and it makes it not work. ugh!

Do you see anything outright wrong with this?

function colorallocate($im,$color){ 
$color = str_replace('#','',$color); 
$white = imagecolorallocate($im,255,255,255); 
$transColor = imagecolorallocate($im,255,255,0); 
imagecolortransparent($im, $transColor); 
$red   = hexdec(substr($color,0,2)); 
$green = hexdec(substr($color,2,4)); 
$blue  = hexdec(substr($color,4,6));
$color_index = ImageColorAllocate($im,$red,$green,$blue);
return array($transColor, $color_index); 
}
 

[SpanKie]

IE does not support transparent PNG's, nor MNG's ...

[ashley526]

Originally posted by SpanKie
IE does not support transparent PNG's, nor MNG's ...

I've seen it done. 😉

[Weedpacket]

Originally posted by ashley526
I've seen it done. 😉

For proper alpha-channel transparency it involves loading extra modules as filters via proprietary CSS code (translation: Microsoft have done it, but can't be bothered fixing IE). But even IE can handle GIF-style transparency without that.

I didn't include imagetruecolortopalette in the function, because I'm still sure your function is flawed in basic concept and wherever I put it would probably be wrong. What exactly is it supposed to do? As I said before, you're allocating three new colours every time you use it - this one you're passing, white, and yellow, which gets used for transparency.

[ashley526]

Well the white I probably can take off there. I think I added that whenever it went white. I was desperate to try anything. lol

I'll try to work on it tonight and see if I can straigten out why it's getting the error. Basically it's a countdown put into an image form. It goes further down the bar as you get closer to the end time. 🙂

Since it's registered as a png image you can put it as just that and it will go on most forums. It's pretty neat!

[ashley526]

Alright just found the time to fix it. 😉

I am starting a fresh before I made any changes... Here's what I have:

function colorallocate($im,$color){
	$color = str_replace('#','',$color);
	$red   = hexdec(substr($color,0,2));
                $green = hexdec(substr($color,2,4));
	$blue  = hexdec(substr($color,4,6));
	return ImageColorAllocate($im,$red,$green,$blue);
}

From this is what I started to use to try to set the transparency, and it's not worked. The thing is.... the little slider bars DO work, they go transparent whenever they in all actuality show up teal first. (which is the default color for a png image that has transparency) This really is above me but I am trying to learn as I go in my free time.

I am guessing you have to assign a color right? And I don't understand what to do with imagetruecolortopalette as I saw no samples. Sorry I am really such a newbie to php...

Thanks again for all your help!!!