November 23rd, 2008
Tutorial : Convert Text into transparent PNG Image using PHP
This tutorial will help you write text on a background and output as an image using the power of PHP. This is useful during those scenarios when you want to display text using a particular font (which isn`t web friendly i.e the text won`t be displayed with the same font in other’s computer). I have used this technique to display the number of RSS subscribers (top-right). So its pretty simple and very basic.
Click Here for a Demo.
STEP 1 : Create PHP file and Define Headers
First we create a PHP file. Lets call it myimage.php. Now we don`t want the browser to understand myimage.php as an image since we`ll be generating the image using this file. So we need to define the headers in this file which will tell the browser that it is an image.
<?php
//HEADERS
header("Content-type: image/png"); //Picture Format
header("Expires: Mon, 01 Jul 2003 00:00:00 GMT"); // Past date
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // Consitnuously modified
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Pragma: no-cache"); // NO CACHE
//image generation code
?>
STEP 2 : The entire code !
The entire code is here, the comments should help tell what each function is doing.
<?php
header("Content-type: image/png"); //Picture Format
header("Expires: Mon, 01 Jul 2003 00:00:00 GMT"); // Past date
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // Consitnuously modified
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Pragma: no-cache"); // NO CACHE
/*image generation code*/
//create Image of size 350px x 75px
$bg = imagecreatetruecolor(350, 75);
//This will make it transparent
imagesavealpha($bg, true);
$trans_colour = imagecolorallocatealpha($bg, 0, 0, 0, 127);
imagefill($bg, 0, 0, $trans_colour);
//Text to be written
$helloworld = isset($_GET['text']) ? $_GET['text'] : "hello World";
// White text
$white = imagecolorallocate($bg, 255, 255, 255);
// Grey Text
$grey = imagecolorallocate($bg, 128, 128, 128);
// Black Text
$black = imagecolorallocate($bg, 0,0,0);
$font = 'arial.ttf'; //path to font you want to use
$fontsize = 20; //size of font
//Writes text to the image using fonts using FreeType 2
imagettftext($bg, $fontsize, 0, 20, 20, $grey, $font, $helloworld);
//Create image
imagepng($bg);
//destroy image
ImageDestroy($bg);
?>
Well thats the source code if you want to generate alpha png images using PHP. Its pretty simple. This isn`t that tough, but there might be some people new to PHP who might want to know.
August 10, 2010 at 3:08 pm
Hi! This worked fine for me, but since i moved my stuff to a new server i get the message that the image cannot be displayed because it contains errors. The .ttf file is in its place and everything else seems to work fine. Do i need to install additional llibrarys for this to work? i use debian 5 min + lighttpd + php5_cgi.
July 31, 2010 at 12:52 pm
Thanks a lot it works for me too…
Just I wanted to ask if we can use some kind of styling in them, how we can do that like making bold text, italics, etc?
August 3, 2010 at 6:54 am
@Jai, yep
July 2, 2010 at 3:12 pm
So, there is no database? I am going to get this to store on a database, when/if I figure this out. I will try posting.
Secondly, Michele, you can use a .css document to control how the way your PhP appears.
June 25, 2010 at 11:49 am
this is awesome! how can i crop the output file just to fit the area of the text??
June 19, 2010 at 3:03 am
good example
April 22, 2010 at 4:16 pm
more features:
- Save the code into new file.php without add "function"
- In your html code insert tag <img src="file.php?text=Your dinamic text" style="background-color:transparent">
don't forget "transparent" style (css or embedded) if you want to maintain the transparency
Alex
March 29, 2010 at 1:13 pm
i need to change the location if i put the font in the same directory..
Actually i am new to PHP thats why i ask this
November 21, 2009 at 11:24 pm
Thanks a lot for this code! but to bad i cant render files thats bigger than 50px.
November 15, 2009 at 9:24 am
Thanks a lot it works for me too…
Just I wanted to ask if we can use some kind of styling in them, how we can do that like making bold text, italics, etc?
November 13, 2009 at 8:33 am
thanks a lot for this code.. it really helped me thanks again
October 30, 2009 at 2:06 am
Can not displayed because it contains some errors.
December 19, 2009 at 3:16 pm
I think you have not include the font file.
October 21, 2009 at 4:05 am
Doesn’t appear to handle ampersand (&) or single quotes (‘)
October 16, 2009 at 8:31 pm
Whoa dude sick!
Such a small code but works so well. Great skillz, thanks for the awesome script 
August 6, 2009 at 10:26 am
Hi, Excellent work. Just what i was looking for.
For people who get the error “The image cannot be displayed, because it contains errors” please make sure that the font file is placed in the same place where its defined in the code (on line no 29 above)!
Thanks,
Fresh Web Developer
July 29, 2009 at 6:50 pm
greate job! well done!
July 17, 2009 at 8:21 am
The codes not work. The result in firefox is “The image ‘http://localhost/fonts/ttop.php?text=hello world’ cannot be displayed, because it contains errors.” and in ie is “Hello, everyone.
Warning: imageftbbox() [function.imageftbbox]: Invalid font filename in C:\wamp\www\index.php on line 20
Warning: imagefttext() [function.imagefttext]: Invalid font filename in C:\wamp\www\index.php on line 26
?NG
IHDR,??”?DATx?? ???F}zg??L1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?1B?3!?hM)?}*IEND?`
“
April 2, 2009 at 2:29 pm
This is beautiful script. The only thing which i want for this script is transparent background in IE6. Is there any possibility that we can control this script in IE6 too..? If so then do let us know sir. I will wait for your reply in either case.
May 3, 2009 at 11:13 pm
To get IE6 to show transparent PNGs, you can use the SuperSleight javascript fix. You can get it on http://www.24ways.org.
February 11, 2009 at 8:57 am
Hi,
The code seems to not work well with IE8. In my trial, IE8 keeps displaying the old image, which I supposed is retrieved from its cache.
January 21, 2009 at 1:06 pm
hi ,
The image “http://localhost/fonts/ttop.php?text=hello world” cannot be displayed, because it contains errors.
this message will be displaying while i m try with this code please help me
December 11, 2008 at 2:52 pm
Hey comrade,
I already translated that tutorial again for vrisom.de, but I’m facing problems with FreeType. As it is not installed with a default PHP5 installation, the text cannot be written onto the image. So I checked the FreeType 2 website, but I couldn’t find any plugin files that I could use as a PHP extention library. So.. short things short… how do I enable a standard PHP installation to support FreeType?
Or is there a way with the GD libary? That one is far more common.
Regards,
Andrew
December 3, 2008 at 3:12 am
This tutorial was exactly what I needed for a project. Thanks for sharing. I appreciate your fine efforts and look forward to your future postings.
November 23, 2008 at 1:30 am
Good writing. Keep up the good work. I just added your RSS feed my Google News Reader..
Matt Hanson