Transparent images with GD

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
bunglero
Forum Newbie
Posts: 5
Joined: Wed Jan 19, 2011 12:14 pm

Transparent images with GD

Post by bunglero »

I have code I created for stacking images with a transparent background. The bottom layer is transparent (transparency color set to black) the second layer is imagefilledellipse shape drawing and the top is a transparent overlay (PNG) that I use to outline the line drawing. After all images are copied to the bottom layer, the finished result is a marker (looks like a Google maps marker) colored with user defined variable. What I am having problems with is that I need to be able to pass in an opacity setting that will make the final image (which already have some transparencies) opaque depending on the input. Here is the code:

Code: Select all

function getMarker($hex){

		//split the input hex into 3 parts and get decimals for each
		$colorArray = str_split($hex,2);
		$R = (int)hexdec($colorArray[0]);
		$G = (int)hexdec($colorArray[1]);
		$B = (int)hexdec($colorArray[2]);
		
		//since my transparent color is black, if black is passed in, make it a slightly lighter black, so it does not appear blank
		if ($R == 0 && $G == 0 && $B == 0){
			$B = 1;
		}
		
		//get the image for the transparent marker overlay. It's a dark outline in the shape of a talk balloon
		//I do this to retain a nice anti aliasing in the final image
		$imgname = '../images/clearMarker.png';
		
		//create a GD image from it and retain it's alpha
		$overlay = imagecreatefrompng($imgname);
		imagesavealpha($overlay, true);
		imagealphablending($overlay, true);
	
		//create the middle layer for drawing the shapes which will be the balloons color filling.
		$image = ImageCreateTrueColor(20, 34);

		//create some color objects
		$markerColor = imagecolorallocate($image, $R, $G, $B);
		$black = imagecolorallocate($image, 0, 0, 0);
		$white = imagecolorallocate($image, 255, 255, 255);

		//set the transparency color
		imagecolortransparent($image, $black);
		
		//draw shapes into the middle layer
		imagefilledellipse($image, 10, 9, 19, 19, $markerColor );
		imagefilledellipse($image, 9, 9, 19, 19, $markerColor );
		imagefilledpolygon($image, array(5,18,13,18,11,22,10,31,8,22), 5, $markerColor);
		
		//create another new image that will be the transparent background, onto which I will merge the two previous images
		$finalImage = imagecreatetruecolor(20,34);
		imagefill($finalImage, 0, 0, IMG_COLOR_TRANSPARENT);
		imagesavealpha($finalImage, true);
		imagealphablending($finalImage, true);
		
		//copy the middle image with the shapes into the final image canvas
		imagecopy($finalImage, $image, 0, 0, 0, 0, 20, 34);

		//copy the overlay image into the final image
		imagecopy($finalImage, $overlay, 0, 0, 0, 0, 20, 34);

		//output image
		header('Content-type: image/png');
		imagepng($finalImage);
		imagedestroy($finalImage);

	}
Again, I want to make the final output image slightly transparent (like 50% alpha transparency or opacity) depending on user input and still retain the original transparent parts of the image. Any help or comments are welcome. Thanks.

Edit: here is a link to the marker overlay file: http://oi54.tinypic.com/11gjdqs.jpg
Last edited by bunglero on Wed Jan 19, 2011 4:58 pm, edited 2 times in total.
mw007
Forum Newbie
Posts: 4
Joined: Wed Jan 19, 2011 11:58 am

Re: Transparent images with GD

Post by mw007 »

I'm not sure I completely understand what you're asking for, but perhaps this will help anyway. You could use the ImageColorAllocateAlpha() function in GD to give you semi-transparent colors. Here is the documentation for you.

--
Hope that helps,
mw
bunglero
Forum Newbie
Posts: 5
Joined: Wed Jan 19, 2011 12:14 pm

Re: Transparent images with GD

Post by bunglero »

mw007 wrote:I'm not sure I completely understand what you're asking for, but perhaps this will help anyway. You could use the ImageColorAllocateAlpha() function in GD to give you semi-transparent colors. Here is the documentation for you.
Unfortunately, I have tried that. If I try to apply a transparency to the ellipse that I draw in the middle layer then it does not show through the bottom layer. Since the transparency for the bottom layer is set to black, the color that shows through the transparency in the middle layer is also black. I know it does not sound like it makes sense, but I did use ImageColorAllocateAlpha instead of ImageColorAllocate and set the alpha to 64, and if you take the code above and do the same you will see what I mean.

Again, what I need it to take the final GD image object ("$finalImage" in the code) and apply a transparency to the entire image. Any one have any other ideas?
mw007
Forum Newbie
Posts: 4
Joined: Wed Jan 19, 2011 11:58 am

Re: Transparent images with GD

Post by mw007 »

After playing with your example, it seems as though GD's "alpha" isn't a true alpha, but more of a color blend. So, instead of giving what you want (i.e. the image being partially transparent), what you'll get is the colors in the image are blended together, but the image itself is still completely opaque. Does that make sense?

I've always used cairo for any advanced on-the-fly image editing. It gives a much more fine-grained control over everything, and definitely can do true image transparency.
bunglero
Forum Newbie
Posts: 5
Joined: Wed Jan 19, 2011 12:14 pm

Re: Transparent images with GD

Post by bunglero »

mw007 wrote:I've always used cairo for any advanced on-the-fly image editing. It gives a much more fine-grained control over everything, and definitely can do true image transparency.
Makes perfect sense. I was hoping that was not the answer. I will look into cario; thanks for the tip!
Post Reply