Thanks for visiting our website! We regularly publish posts like this one. If you are interested in receiving the latest updates as soon as they are posted, please consider subscribing to the RSS feed or to our e-mail newsletter.

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!