Transparent images with GD
Posted: Wed Jan 19, 2011 12:41 pm
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:
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
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);
}
Edit: here is a link to the marker overlay file: http://oi54.tinypic.com/11gjdqs.jpg