Ok, so am working on a simple generator using jquery. A user enters a text of his/her choice, selects a font, font-color and font-size. All this properties are displayed on a separate div in real-time (live preview).
I now need to save the generated preview as a picture. For that, I use php GD library. All works fine but with some fonts, everything is just messed up.
In the first image, everything looks alright but the second image, the line height is just messed up.
This is my php script that am using to processes the properties
<?php
//Width and height of desired image
$width = 320;
$height= 320;
//Create an image with specified height and width
$main_img = ImageCreate($width, $height);
$mx = imagesx($main_img);
$my = imagesy($main_img);
//Capture values from form
$main_text = $_POST['rtext'];
$main_text_size = $_POST['rfsize'];
$color = $_POST['rcolor'];
$mt_f = $_POST['rfont'];
$main_text_x = ($mx/2);
// more code here
//wrap text if text too long
$words = explode(' ', $main_text);
$lines = array($words[0]);
$currentLine = 0;
for($i = 1; $i < count($words); $i++)
{
$lineSize = imagettfbbox($main_text_size, 0, $mt_f, $lines[$currentLine] . ' ' . $words[$i]);
if($lineSize[2] - $lineSize[0] < $mx)
{
$lines[$currentLine] .= ' ' . $words[$i];
}
else
{
$currentLine++;
$lines[$currentLine] = $words[$i];
}
}
$line_count = 1;
// Loop through the lines and place them on the image
foreach ($lines as $line)
{
$line_box = imagettfbbox($main_text_size, 0, $mt_f, "$line");
$line_width = $line_box[0]+$line_box[2];
$line_height = $line_box[1]-$line_box[7];
$line_margin = ($mx-$line_width)/2;
$line_y = (($line_height+12) * $line_count);
imagettftext($main_img, $main_text_size, 0, $line_margin, $line_y, $main_text_color, $mt_f, $line);
// Increment Y so the next line is below the previous line
$line_count ++;
}
header("Content-type: image/png");
//code to download the image
?>
Is there a way I can modify the part of the code where I wrap the text to accomodate all fonts? Like automatically calculate the line height based on the font?
Thanks, any help will be appreciated
