Today I would like to discuss using the GD library to render text on top of existing images. This could be nicely applied for customized error messages or watermarking your existing image 'on-the-fly'.
The GD Library is a open source library for the dynamic creation of images by programmers. You must first ensure that your PHP has support for the GD library. Depending on your situation or environment, you may need to rebuild/recompile PHP with --with-gd in your configuration flags. It might also be useful to compile with --with-exif as well. Exif extension you will be able to read stored header information in the graphic file. Since this example is using text overlay, you'll need to ensure that your PHP also has freetype support built in (--with-freetype-dir=/usr).
For more information on GD and PHP with GD please check out the links below:
http://libgd.org/Main_Page
http://us.php.net/manual/en/ref.image.php
This example will discuss how to overlay a text string on top of an existing image. In your test directory, please copy over arial.ttf and the image file you want to write on top of. You can use full path to the font instead of accessing it on our test directory. This example is also using a JPG file vs. GIF. You can add additional functionality to your script to detect JPG or GIF (exif functions) and use the appropriate imagecreatefromjpeg()/imagejpeg() or imagecreatefromgif()/imagegif() functions within.
<?
$text = "Hello World!!!";
$file = 'test.jpg';
$dim = getimagesize($file);
$imagewidth = $dim[0];
$imageheight = $dim[1];
$image = imagecreatefromjpeg($file);
$black = imagecolorallocate($image, 0, 0, 0);
$grey = imagecolorallocate($image, 128, 128, 128);
$font = 'arial.ttf';
imagettftext($image, 12, 0, 5, 20, $black, $font, $text);
imagettftext($image, 12, 0, 6, 21, $grey, $font, $text);
header('Content-type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>This example will add the text 'Hello World!!!' to the top left area of the image. First we need to 'create' the image from the original, next we need to allocate colors for our fonts. Simply use RGB values in the imagecolorallocate() and pass in the image handle. Next I used imagettftext() to add the font/text to the image. Using ttf, you will be able to anti-alias your fonts. You can also use imagestring(), but this will NOT be anti-aliased.
imagettftext() takes 8 arguments.
1. image resource
2. font size in point
3. angle
4. x coordinate
5. y coordinate
7. color
8. font file
8. text string to use
In this example, I used two calls to imagettftext(). This is to create a 'grey' shadow behind the black text. I've provided
Finally, we want to present the image to the browser. Simply adjusting the header() to be Content-type: image/jpeg (or image/gif, depending on your output) and running imagejpeg() will present the image with text on it.
As always, you should remember to clean up after yourself with imagedestroy().
I've provided the test script and test.jpg for download.
http://www.devsnips.com/files/image051407.tar.gz
Go Back