Hello coders,

This is a snippet which centers a text on an image using the GD Library.

First, we create the image using the ImageCreate() function. Here we set the width & height.

$width = 400;
$height = 100;

$im = ImageCreate($width, $height);

The we use ImageColorAllocate() to fill the image with white background and set the border’s color, which is eventually created with ImageRectangle().

// white background and blue text
$bg = ImageColorAllocate($im, 255, 255, 255);

// grey border
$border = ImageColorAllocate($im, 207, 199, 199);
ImageRectangle($im, 0, 0, $width - 1, $height - 1, $border);

Set the text and its color:

$text = 'This is my photo description text.';

$textcolor = ImageColorAllocate($im, 0, 0, 255);

Now we need to setup the font size and determine the font height and width.

// Font Size
$font = 3;

$font_width = ImageFontWidth($font);
$font_height = ImageFontHeight($font);

In the next lines we determine the text’s width and height. Then, based on the information we have, the X, Y coordonates of the upper left corner can be calculated.

/*
-----------
Text Width
-----------
*/

$text_width = $font_width * strlen($text);

// Position to align in center
$position_center = ceil(($width - $text_width) / 2);

/*
-----------
Text Height
-----------
*/

$text_height = $font_height;

// Position to align in abs middle
$position_middle = ceil(($height - $text_height) / 2);

After we determine the coordinates, we the text using ImageString():

/*
-----------------
Write the string
-----------------
*/

$image_string = ImageString($im, $font, $position_center, $position_middle, $text, $textcolor);

And, finally, our last lines will output our image:

/*
--------------------------------------
Output our image (PNG in our example)
--------------------------------------
*/
header("Content-type: image/png");
ImagePNG($im);

Here’s the complete code:

<?php
/*
Credits: BitRepository
URL: http://www.bitrepository.com/web-programming/php/how-to-center-a-text-on-an-image-using-gd.html
*/

$width = 400;
$height = 100;

$im = ImageCreate($width, $height);

// white background and blue text
$bg = ImageColorAllocate($im, 255, 255, 255);

// grey border
$border = ImageColorAllocate($im, 207, 199, 199);
ImageRectangle($im, 0, 0, $width - 1, $height - 1, $border);

$text = 'This is my photo description text.';

$textcolor = ImageColorAllocate($im, 0, 0, 255);

// Font Size
$font = 3;

$font_width = ImageFontWidth($font);
$font_height = ImageFontHeight($font);

/*
-----------
Text Width
-----------
*/

$text_width = $font_width * strlen($text);

// Position to align in center
$position_center = ceil(($width - $text_width) / 2);

/*
-----------
Text Height
-----------
*/

$text_height = $font_height;

// Position to align in abs middle
$position_middle = ceil(($height - $text_height) / 2);

/*
-----------------
Write the string
-----------------
*/

$image_string = ImageString($im, $font, $position_center, $position_middle, $text, $textcolor);

/*
--------------------------------------
Output our image (PNG in our example)
--------------------------------------
*/
header("Content-type: image/png");
ImagePNG($im);
?>

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!