Изображение, созданное с использованием GD, не соответствует размеру и шрифту

Я создал изображение, используя стиль div. Ниже показан мой div.

Я сохраняю стиль div в формате json, включая цвет фона, высоту, ширину, текст, цвет текста и т. Д. В базе данных. Массив выглядит так:

Array
(
[0] => stdClass Object
(
[itmTpe] => website
[width] => 110px
[height] => 25px
[left] => 350px
[top] => 122px
[zIndex] => 101
[dataB_URL] =>
[text] => Website
[iconDisp] => inline-block
[icon] => fa-globe
[font] => 22px
[color] => rgb(255, 255, 255)
[background] => rgb(7, 157, 236)
)
............
)

Используя эти детали, я создаю изображение. Код, который я сделал, это:

$json_code    =   json_decode(htmlspecialchars_decode($result['CP_Item']));  // returns array of div details
$i=1;
header('Content-Type: image/png');
foreach($json_code as $cp_item)   // I have many such div elements with different styles
{
if($cp_item->itmTpe!='show_image' && $cp_item->itmTpe!='show_carousel' && $cp_item->itmTpe!='youtube_video')
{
if($cp_item->width)
$width=  str_replace('px', '', $cp_item->width);

if($cp_item->height)
$height=str_replace('px', '', $cp_item->height);

$image = imagecreate($width, $height);
$background=$cp_item->background;
$bgcolor = str_replace(array('rgb(', ')', ' '), '', $background);
$arr = explode(',', $bgcolor);
$background = imagecolorallocate($image, $arr[0],$arr[1],$arr[2] );

$text=$cp_item->text;

if($cp_item->color)
$color=$cp_item->color;

$txtcolor = str_replace(array('rgb(', ')', ' '), '', $color);
$txtarr = explode(',', $txtcolor);
$textcolor=imagecolorallocate($image, $txtarr[0],$txtarr[1],$txtarr[2] );
$fontfile='fonts/times.ttf';
if($cp_item->font)
{
$size=str_replace('px', '', $cp_item->font);
}
else
{
$size=10;
}

// find the size of the image
$xi = ImageSX($image);
$yi = ImageSY($image);

// find the size of the text
$box = ImageTTFBBox($size, 0, $fontfile, $text);

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

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

//write the text at calculated position
imagettftext($image, $size, 0, $x+20, $y, $textcolor, $fontfile , $text);
$font2 = 'fonts/fontawesome-webfont.ttf';$icontext=$icon[$cp_item->icon];
//places another text with smaller size
imagettftext($image,  $size, 0, $x, $y, $textcolor, $font2, $icontext);
$file="createdimages/$pid/$i.png";
imagepng($image, $file);
$i++;
imagedestroy($image);
}
}

Изображение создается успешно. Проблема в том, что текст на изображении кажется больше, чем размер шрифта, используемый в div. Я использую шрифт Times New Roman как для текста, так и для изображения. Но оба показывают различия. Результирующее изображение:

Также размер изображения выглядит меньше размера div. Я создаю изображение с той же шириной, высотой и размером шрифта div. Я не понимаю, в чем проблема с этим?

Я новичок в GD. Может кто-нибудь помочь мне исправить это? Заранее спасибо.