Question

I am currently working on a website and lately have been using GD with PHP to automatically create transparent images that consist of text for use with navigation, headers, etc on the website. It saves me a lot of time in Photoshop plus I can change the text on the buttons instantly when needed.

Well I have hit a dead end here. I found the method of sizing the “textbox”, created as my image, to what the size of the text is. But the problem I am facing is the fact that I am using a TTF font which is different then what GD expects the size to be. Basically, the last letter would be chopped off the outputted image. So I was wondering if there was a way to fix this while keeping a tight edge to the text or make the original textbox a much larger size and then “trim” the transparent pixels off the image.

This is the code I’m working with now…

<?
$text = strip_tags($_GET['btn']);
if(file_exists('nav_'.$text.'.png')) {
    header("Content-type: image/png");

    $image = imagecreatefrompng('nav_'.$text.'.png');
    imagesavealpha($image, true);
    imagealphablending($image, false);
    imagepng($image);
    imagedestroy($image);
} else {
    header("Content-type: image/png");

    $fontSize = 10;
    $angle = 0;
    $font = "RonniaBold.ttf";

    $size = imagettfbbox($fontSize, $angle, $font, $text);
    $image = imagecreatetruecolor(abs($size[2]) + abs($size[0]) + 5, abs($size[7]) + abs($size[1]) + 5);
    imagesavealpha($image, true);
    imagealphablending($image, false);

    $transparentColor = imagecolorallocatealpha($image, 200, 200, 200, 127);
    imagefill($image, 0, 0, $transparentColor);

    $textColor = imagecolorallocate($image, 125, 184, 222);
    imagettftext($image, $fontSize, 0, 1, abs($size[5])+1, $textColor, $font, str_replace('_',' ',strtoupper($text)));
    imagepng($image, 'nav_'.$text.'.png', 0);
    imagedestroy($image);
}
?>

Hopefully you guys have some insight to this, I could really use it!

Answer 1

Wherever possible, I use the Imagick class, as I prefer the ImageMagick library. The following example is taken almost verbatim from the example given here. It creates an image based on the size of the text supplied:

$text = 'Hello World!';

// Create a new ImageMagick objects.
$im = new Imagick();
$draw = new ImagickDraw();
$colour = new ImagickPixel('#000000');
$background = new ImagickPixel('none');

// Set font properties.
$draw->setFont('Fertigo_PRO.otf');
$draw->setFontSize(72);
$draw->setFillColor($colour);
$draw->setStrokeAntialias(true);
$draw->setTextAntialias(true);

// Get font metrics.
$fm = $im->queryFontMetrics($draw, $text);

// Create text.
$draw->annotation(0, $fm['ascender'], $text);

// Create a new empty canvas, using the text size.
$im->newImage($fm['textWidth'], $fm['textHeight'], $background);

// Create the image.
$im->setImageFormat('png');
$im->drawImage($draw);

// Save the image.
$im->writeImage('test.png');

If you want more information on the Imagick class, I recommend the excellent Imagick articles from Mikko’s Blog.