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.
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