Sometimes it’s necessary to generate images with text on, and it can be a wise idea to generate it with transparent background so you can use it on different colors.

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, $fontSize, $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");
imagedestroy($image);

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!

Similar Posts:

  • Share/Bookmark