Center text on image using PHP GD

Question

So I am creating a banner generator.

I will be adding text in the middle, but would like it to be exactly in the center. I know that imagettftext can be used to write onto the banner, but that won't center it.

A likely solution could be to find the width of the text and then use half of it taken away from half of the banner width, but I've got no idea about how to do this.

I am using PHP-GD and do not want to use anything else I will have to install.

imagettftext($img, 14, 0, (468 - ((strlen($_GET['description']) * imagefontwidth(imageloadfont('minecraft.ttf'))) / 1)), 85, imagecolorallocate($img, 0, 0, 0), 'minecraft.ttf', $_GET['description']);

The code above is making the result above. It is fine with small strings but there must be something wrong since as soon as they become long, it fails.

Answer 1

Check out imagettfbbox: http://www.php.net/manual/en/function.imagettfbbox.php. It will give you the extents of the text you wish to render. Then it's simple arithmetic to center that on your image.

Answer 2

You can center the text by getting the width from the outer boundaries from imageftbbox then divide this by two to get an offset that will center the text in the image.

// Get image dimensions
  $width = imagesx($image);
  $height = imagesy($image);
// Get center coordinates of image
  $centerX = $width / 2;
  $centerY = $height / 2;
// Get size of text
  list($left, $bottom, $right, , , $top) = imageftbbox($font_size, $angle, $font, $text);
// Determine offset of text
  $left_offset = ($right - $left) / 2;
  $top_offset = ($bottom - $top) / 2;
// Generate coordinates
  $x = $centerX - $left_offset;
  $y = $centerY + $top_offset;
// Add text to image
  imagettftext($image, $font_size, $angle, $x, $y, $color, $font, $text);

imageftbbox documentation

Answer 3

You can center a text in an image by getting the half of the image height and width and also the half of the text height and width

You can get the image width and height using imagesx and imagesy respectively.
You can get the text width and height using imagettfbbox method in PHP GD.

After, you get the bound, you can get the text width and text height
text width = right bound on x - left bound on x axis
text height = lower bound on y axis - upper bound on y axis

Then use the image width and height to the get the start offset that will allow your image to be centered
start_x_offset = (imagewidth - textwidth) / 2;
start_y_offset = (imageheight - textheight) / 2;

// Get image dimensions
$image_width = imagesx($image);
$image_height = imagesy($image);

$text_bound = imageftbbox($font_size, $angle, $font, $text);

//Get the text upper, lower, left and right corner bounds
$lower_left_x =  $text_bound[0]; 
$lower_left_y =  $text_bound[1];
$lower_right_x = $text_bound[2];
$lower_right_y = $text_bound[3];
$upper_right_x = $text_bound[4];
$upper_right_y = $text_bound[5];
$upper_left_x =  $text_bound[6];
$upper_left_y =  $text_bound[7];


//Get Text Width and text height
$text_width =  $lower_right_x - $lower_left_x; //or  $upper_right_x - $upper_left_x
$text_height = $lower_right_y - $upper_right_y; //or  $lower_left_y - $upper_left_y

//Get the starting position for centering
$start_x_offset = ($image_width - $text_width) / 2;
$start_y_offset = ($image_height - $text_height) / 2;

// Add text to image
imagettftext($image, $font_size, $angle, $start_x_offset, $start_y_offset, $color, $font, $text);

Answer 4

It took me a long time but I figured out how to center text on an image exactly.

list($left,, $right) = imageftbbox(18, 0, 'minecraft.ttf', $_GET['description']);
$twidth = $right - $left;
$pos = (HALF_OF_IMAGE_WIDTH - $twidth) / 2;