Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

Generate text with transparent background

  • Please log in to reply
1 reply to this topic

#1 AfTriX


    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 541 posts

Posted 04 January 2007 - 12:07 AM

First some variables to define how the function will work.
$theText is the text that we want to have in the image.
The other variables should also be pretty easy to understand...
I defined them in variables so you easily can change them to try different things.

The first thing which is a little bit tricky is the "imageTTFBBox"-function.
Not really self explaining hehe :-)
What it does is depending on the parameters it gives back the size of the bounding box needed for this text, in pixels.
You get an array with this information:
0 lower left corner, X position
1 lower left corner, Y position
2 lower right corner, X position
3 lower right corner, Y position
4 upper right corner, X position
5 upper right corner, Y position
6 upper left corner, X position
7 upper left corner, Y position

The next step is to create the image (empty but with correct size to fit the text) with this function:
imageCreateTrueColor(x, y)
You give the function the width in x and y, and you get the values you see in the function call.

imageSaveAlpha sets the mode to save all alpha channel information, which is needed to make a png file transparent.
ImageAlphaBlending sets the blending mode off, which meens "simply" that the alpha information is preserved. (not that important, just set it to false hehe)

imagecolorallocatealpha allocates a color for an image, and sets how transparent it should be. 0 is NO transparency and 127 is fully transparent.
127 is prefect for us, but you can always mess around with the numbers to se what happens :-)
This color variable is used for filling the "real" image with transparent color.

The last part is pretty straight forward.
Get textColor, and write the text in the image. After that we just save it with the name textImage.png.
OBS, the web server needs write permissions to this catalog.
So if you are going to use this in a live application/site, you should put the images in a separate directory and change permissions on that.

$theText = "999 Tutorials, transparent text";
$fontSize = 15;
$angle = 25;
$font = "arial.ttf";

$size = imageTTFBBox($fontSize, $angle, $theFont, $theText);
$image = imageCreateTrueColor(abs($size[2]) + abs($size[0]), abs($size[7]) + abs($size[1]));
imageSaveAlpha($image, true);
ImageAlphaBlending($image, false);

$transparentColor = imagecolorallocatealpha($image, 200, 200, 200, 127);
imagefill($image, 0, 0, $transparentColor);

$textColor = imagecolorallocate($image, 200, 200, 200);
imagettftext($image, $fontSize, 0, 0, abs($size[5]), $textColor, $font, $theText);
imagepng($image, "textImage.png");

If you think that the code is hard to understand, just read the text once again. If you still don't understand.... don't care :-) Just use it and get a beer instead!

Front Page | Pixel Groovy
  • 0

#2 xtraze


    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 872 posts

Posted 08 January 2007 - 12:13 AM

I think I will quickly create and use a .png file.
Too long for me as I use png.
  • 0

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download