PHP/Drawing with text
Written by: WimpySE , 2009-04-17 07:34:10
Introduction:
While working with PHP and images you might wonder how to create images with text and similar. In this tutorial/function-guide I'm going to guide you through the steps of writing text to images with PHP, grabbing colors and putting them to use.
Prerequisites:
None, but if you feel unsure how to use the functions described in this guide, check them up at php.net and see if what you find there can help you to understand them better!
Requirements:
PHP 4+ with GD Library
Getting the business started:
First of all we need to create an image:
<?php
$image = imagecreate(200, 200);
?>
Here we call the function imagecreate() which demands two integers with the pixel value of width and height. Then we store the image resource that was created in $image.
If we would want to output this to our browser we have to use to add a little code:
<?php
$image = imagecreate(200, 200);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
The header() function tells the browser that it should expect an image in png format. The imagepng() function sends the image to the browser. Actually you could skip header() and it will still work, at least in modern versions of PHP(with GD library). The imagedestroy() function frees up the memory of the image from the server. You could skip this to, but I would recommend that you use both imagedestroy() and header() when you create images using PHP.
From here we should grab some colors for our text and load a font:
(place this code before the header() function and after the imagecreate() function )
<?php
$black = imagecolorallocate($image, 0, 0, 0);
$red = imagecolorallocate($image, 255, 0, 0);
$font = "URL";
?>
The first call to the imagecolorallocate() function fills the backround color in palette based images - like the one we created with the imagecreate() function. The imagecolorallocate() function requests an image resource identifier and RGB(red, green, blue) values from 0-255.
The font URL represent the path to the True Type Font-file on you server or computer.
Our image should now look like this:
Now we are going to do some magic with a simple for loop:
(place this code after $font = "URL"; )
<?php
$X = 200/2; //Width divided by two
$Y = 200/2; //Height divided by two
$angle = 0;
for($i = 0; $i < 36; $i++)
{
imagettftext($image, 12, $angle, $X, $Y, $red, $font, " Spinning");
$angle += 10;
}
?>
The imagettftext() function requests an image resource, a fontsize, the angle you want to write your text in, the coordinates for where it should begin ($X, $Y), a color identifier, a font, and the text to write.
If the angle is set to zero the text will be written from left to right horizontally. If it's set to 90 it will be written top down vertically. And so on. Our loop changes the angle for every iteration.
With all code put together the result should look like this:
Here's the whole code for those who don't have the time, or something to copy/paste it from the guide:
<?php
$image = imagecreate(200, 200);
$black = imagecolorallocate($image, 0, 0, 0);
$red = imagecolorallocate($image, 255, 0, 0);
$font = "URL";
$X = 200/2; //Width divided by two
$Y = 200/2; //Height divided by two
$angle = 0;
for($i = 0; $i < 36; $i++)
{
imagettftext($image, 12, $angle, $X, $Y, $red, $font, " Spinning");
$angle += 10;
}
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
Stuff to think of:
Use a clear font for the diagram that looks good even in smaller sizes, there's a lot of sites on the web where you can download free type fonts free of charge! Google it! Google it! Google it!
I used a font that's called Acknowledge TT BRK that can be downloaded here.
Guide written by,
WimpySE
There are no comments on this article.
Leave a message!
If you have any question or just want to leave a message, just fill out the form below!
Your e-mail will not be visible in your post, it is for validation reasons only
WimpySE