Jump to content

How create a transparent image using gd


penguine
 Share

Recommended Posts

Yeah, it's possible. Here's a script to create a PNG with a transparent background and a red border:

<?php$image = imagecreatetruecolor(200, 200);$trans_color = imagecolorallocate($image, 0, 0, 0);$color = imagecolorallocate($image, 255, 0, 0);imagecolortransparent($image, $trans_color);imagefill($image, 0, 0, $trans_color);imagerectangle($image, 0, 0, 199, 199, $color);header("Content-type: image/png");imagepng($image);imagedestroy($image);?>

I saved that as trans.php and then used this to verify that it's transparent, you can change the background color on the page to test:

<html>  <head>	<title>Trans test</title>	<style type="text/css">	body { background-color: blue; }	</style>  </head>  <body>	<img src="trans.php">  </body></html>

Link to comment
Share on other sites

Thanks justsomeguy, That's working in ffox exactly as u said.I have three more questions.1)There is a problem with it in ie.How i overcome this?(i am getting black fill)2)I created a function for line.

function line(){ $image= imagecreatetruecolor(250,25);$trans_color = imagecolorallocate($image, 0, 0, 0);$color = imagecolorallocate($image, 220, 210, 60);imagecolortransparent($image, $trans_color);imagefill($image, 0, 0, $trans_color);   $line_color = imagecolorallocate ($image,220, 210, 60);imageline($image, 40, 0, 240, 0, $line_color);imagepng ($image);imagedestroy($image); }

but there is a canvas height more than the height of the line.If i reduce $image= imagecreatetruecolor(250,25); to $image= imagecreatetruecolor(250,10);then there is no line visible.How should i create line exactly as the line thickness?3)how should i make transparent the input type text background from white?

Link to comment
Share on other sites

IE6 doesn't show PNG transparency correctly. You can use a Javascript file to fix that in IE6, or you can make it a gif instead of a png. I'm not sure what you're asking about the line, that script works like it should for me. You can reduce the height of the canvas all the way down 1 pixel and the line still gets drawn, it's always on the top of the canvas.

Link to comment
Share on other sites

how should i make transparent the input type text background from white(in ie)?
Make the CSS background-color:transparent;
Link to comment
Share on other sites

It basically enables the PNG alpha-transparency renderer (it is already enabled for all other browsers). This is the code from http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.{   var arVersion = navigator.appVersion.split("MSIE")   var version = parseFloat(arVersion[1])   if ((version >= 5.5) && (document.body.filters))    {      for(var i=0; i<document.images.length; i++)      {         var img = document.images[i]         var imgName = img.src.toUpperCase()         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")         {            var imgID = (img.id) ? "id='" + img.id + "' " : ""            var imgClass = (img.className) ? "class='" + img.className + "' " : ""            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "            var imgStyle = "display:inline-block;" + img.style.cssText             if (img.align == "left") imgStyle = "float:left;" + imgStyle            if (img.align == "right") imgStyle = "float:right;" + imgStyle            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle            var strNewHTML = "<span " + imgID + imgClass + imgTitle            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"             img.outerHTML = strNewHTML            i = i-1         }      }   }    }window.attachEvent("onload", correctPNG);

It basically goes through all images (img tags) on the page one by one, then checks whether they are of extension PNG. If it is, it replaces that image tag with a new one, but with an extra style definition which enables the alpha tranasparency filter for that image

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<image source>', sizingMethod='scale');

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...