Aligning php Generated Image dynamic text in center

Question

i want to align the text generated on the image to the center of the image. for the moment, i dont know if it is possible to align it. below is the code.

$im = @imagecreatefromjpeg('poloroid.jpg');

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
//imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
//$text = 'John...';
$fbid = $_POST["id"]; 
$text = $_POST["want"];
$fb_email =$_POST["email"];
$fb_name=$_POST["name"];

$uploads_dir = 'uploaded_files/';
// Replace path by your own font path
$font = 'verdana.ttf';

//image file name
//$name ="$fbid.png";
$name = $uploads_dir.$fbid.".png"; //this saves the image inside uploaded_files folder

// Add some shadow to the text
imagettftext($im, 20, 0,  25, 126, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, 25, 125, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
//imagepng($im);
imagepng($im,$name,9);
imagedestroy($im);

thanks for the help guys.

Khmer

Answer 1

$im = @imagecreatefromjpeg('poloroid.jpg');

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
//imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
//$text = 'John...';
$fbid = $_POST["id"]; 
$text = $_POST["want"];
$fb_email =$_POST["email"];
$fb_name=$_POST["name"];

$uploads_dir = 'uploaded_files/';
// Replace path by your own font path
$font = 'verdana.ttf';
$font_size = 20;
$angle = 45;

//image file name
//$name ="$fbid.png";
$name = $uploads_dir.$fbid.".png"; //this saves the image inside uploaded_files folder

// Get image Width and Height
$image_width = imagesx($im);  
$image_height = imagesy($im);

// Get Bounding Box Size
$text_box = imagettfbbox($font_size,$angle,$font,$text);

// Get your Text Width and Height
$text_width = $text_box[2]-$text_box[0];
$text_height = $text_box[7]-$text_box[1];

// Calculate coordinates of the text
$x = ($image_width/2) - ($text_width/2);
$y = ($image_height/2) - ($text_height/2);

// Add some shadow to the text
imagettftext($im, $font_size, 0, $x, $y+1, $grey, $font, $text);

// Add the text
imagettftext($im, $font_size, 0, $x, $y, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
//imagepng($im);
imagepng($im,$name,9);
imagedestroy($im);

Binns

i used this code. but then the images not the same position due to the difference in width. correct? – Khmer

I didn't understand, please be more specific. – Binns

The line that calculates text bounding box height should be: $text_height = $text_box[7]-$text_box[1]; - the code above incorrectly calculates it as 0. Sadly I'm not allowed to edit single characters... – Experimentalism

Answer edited per the above comment from @John. Also added reference to imagettfbbox() documentation that justifies this change. – Chichi

The above code was not centering properly for me. I changed $text_width to: $text_width = abs($text_box[4] - $text_box[0]) + 10; and $text_height = $text_box[7]-$text_box[1]; and also set $angle = 0; and then everything was centering correctly. Hope it helps someone else! – Kitchener

According to the documentation, the x, y coordinates represent the coordinates of the baseline start point so this will not center it – Jeggar

Answer 2

You can use stil/gd-text class. Disclaimer: I am the author.

<?php
use GDText\Box;
use GDText\Color;

$im = @imagecreatefromjpeg('poloroid.jpg');

$textbox = new Box($im);
$textbox->setFontSize(20);
$textbox->setFontFace('verdana.ttf');
$textbox->setFontColor(new Color(0, 0, 0)); // black
$textbox->setTextShadow(
    new Color(0, 0, 0, 80), // black color, but 60% transparent
    0,
    -1 // shadow shifted 1px to top
);
$textbox->setBox(
    0,  // distance from left edge
    0,  // distance from top edge
    imagesx($im), // textbox width, equal to image width
    imagesy($im)  // textbox height, equal to image height
);

// now we have to align the text horizontally and vertically inside the textbox
// the texbox covers whole image, so text will be centered relatively to it
$textbox->setTextAlign('center', 'center');
// it accepts multiline text
$textbox->draw($text);

$uploads_dir = 'uploaded_files/';
//image file name
//$name ="$fbid.png";
$name = $uploads_dir.$fbid.".png"; //this saves the image inside uploaded_files folder
imagepng($im, $name, 9);
imagedestroy($im);

Demonstration:

Gnathion

Excellent using it – Vaginal

Awesome. It's very easy to use. Nice documentation. – Harrington

Hey, this works great. Any way to automatically make the font size increase until the font fills the full width? For example if I am making a logo generator that wants the word "example" to fill the full width - specified padding? – Clair

@Harrington How do I set multiple paragraphs? Like how will I know at which coordinate the first paragraph has an end and set the box size accordingly for the 2nd para and onwards? I tried to tag the author but somehow it doesn't link ): – Thorner

Answer 3

I've updated your code a little:

function ImageTTFCenter($image, $text, $font, $size, $angle = 45) 
{
    $xi = imagesx($image);
    $yi = imagesy($image);

    $box = imagettfbbox($size, $angle, $font, $text);

    $xr = abs(max($box[2], $box[4]));
    $yr = abs(max($box[5], $box[7]));

    $x = intval(($xi - $xr) / 2);
    $y = intval(($yi + $yr) / 2);

    return array($x, $y);
}

$im = @imagecreatefromjpeg('poloroid.jpg');

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
//imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
//$text = 'John...';
$fbid = $_POST["id"]; 
$text = $_POST["want"];
$fb_email =$_POST["email"];
$fb_name=$_POST["name"];

$uploads_dir = 'uploaded_files/';
// Replace path by your own font path
$font = 'verdana.ttf';

//image file name
//$name ="$fbid.png";
$name = $uploads_dir.$fbid.".png"; //this saves the image inside uploaded_files folder

list($x, $y) = ImageTTFCenter($im, $text, $font, 20)
// Add some shadow to the4 text
imagettftext($im, 20, 0, $x, $y+1, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, $x, $y, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
//imagepng($im);
imagepng($im,$name,9);
imagedestroy($im);

The ImageTTFCenter function will find the center coordinates of you image which you will tell imagettftext

Orvil

it aligns the starting of the text in the middle but not centering the text. do you understand what i mean? – Khmer

Answer 4

foreach ($user as $key=>$value){    
    $bb = imagettfbbox($value['font-size'],0,$fontname,$value['name']);    
    $WW = abs($bb[2]-$bb[0]);    
    $XX = ($value['XPos']+$WW);    
    $HH = abs($bb[5]-$bb[3]);    
    $HH +=1;
    $HHH += $HH;
    imagettftext($im, $value['font-size'], 0, $value['XPos'],   $value['YPos'], $color[$value['color']], $fontname, $value['name']);  
    $HHH += 1;
    $WIDE = abs($bb[2]-$bb[0]);  
    $endpoint=$value['XPos']+$WIDE;  
    $bb2 = imagettfbbox($value['font-size'],0,$fontname,$value['name']);  
    $WW2 = abs($bb2[2]-$bb2[0]);     
    $x2pos= $endpoint-$WW2;    
    imagettftext($im, $value['font-size'], 0, $x2pos, $value['YPos'], $color[$value['color']], $fontname, $value['name']);
}

Adam