Creating transparent PNG images in GD

[djnoz]

I'm trying to overlay a couple of transparent PNG files in GD to create a new PNG file. The images overlay okay, apart from the fact that I'm left with a white background in the resulting image, instead of a transparent background.


<?php
$im = imagecreatefrompng('images/kaldris/kavatar/avatar.png');
$im2 = imagecreatefrompng('images/kaldris/kavatar/jacket.png');

imagecopy($im, $im2, 0, 0, 0, 0, 31, 66);

// Output the image

// ##### Outputs an image into browser
//header ('Content-type: image/png');
//ImagePng ($im);

// ##### Creates image on server
$out = "images/kaldris/kavatar/matrix.png";
ImagePng ($im, $out);

// clean up

ImageDestroy ($im);
ImageDestroy ($im2);
?>

Here is the input and output:

$im
http://www.animesource.co.uk/avatar.png

$im2
http://www.animesource.co.uk/jacket.png

merge result
http://www.animesource.co.uk/matrix.png<-- Look! An annoying white background

Help!

[Slynderdale]

Internet Explorer doesn't support alpha transparent png's by default.

Also I believe you need to specify a transparent color for png's and gif's in GD for a transparent background.
Try looking here:
http://www.php.net/imagecolortransparent
http://www.php.net/imagesavealpha

[Slynderdale]

Internet Explorer doesn't support aplha transparencies by default, only IE 5.5 or higher has some support for them but needs a custom filiter. This filiter doesn't work in the other browsers and causes the image to be blank.

I made a php function that checks to see what browser the user has and then shows the correct code for the png.

function png_image($image,$width=-1,$height=-1,$extra="") {
global $_SERVER;
static $static_browser;
if (!is_array($static_browser)) {
$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
if ((strpos($useragent,'win') || strpos($useragent,'microsoft')) and strpos($useragent,'msie')) {
preg_match('#msie ([0-9\.]+)#', $useragent, $regs);
$static_browser[0] = $regs[1];
} else $static_browser[0] = 0;
}
$width =intval($width);
$height =intval($height);
if (($width<0 || $height<0) && file_exists($image)) {
if ($info = @getimagesize($image)) {
if ($info[0]>0 && $width<0) $width = $info[0];
if ($info[1]>0 && $height<0) $height = $info[1];
}
}
$extra = trim($extra);
if ($extra) $extratag .= $extra." ";
if ($width>0) $widthtag = "width=\"".$width."\" ";
if ($height>0) $heighttag = "height=\"".$height."\" ";
if (($static_browser[0]>=5.5) and file_exists($image)) {
return "<img style=\"FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='$image', sizingMethod='scale'); WIDTH: ".$width."px; HEIGHT: ".$height."px\" src=\"data/spacer.gif\" ".$widthtag.$heighttag.$extratag."/>";
} else {
return "<img src=\"$image\" ".$widthtag.$heighttag.$extratag."/>";
}
}


An example on how to use it:

<?php echo png_image('data/bg_main.png',800,100,'border="0"'); ?>


Feel free to use it and edit it how you want it.