Jump to content

How create a transparent image using gd

penguine

By penguine
in PHP

Recommended Posts

justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
penguine Newbie

penguine

Posted
  • Author
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
Synook w3schools Guru

Synook

Posted
Posted
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
Synook w3schools Guru

Synook

Posted
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...