Page 1 of 1

GD Lib TTF Font Mattes

Posted: Thu Oct 01, 2009 3:46 am
by mikemike
Hi there,

I have created a CMS on a very heavily jQueried web site: http://rnmtest.co.uk/oddfellows/#

One problem I have is that the client specifically wanted Trajan Pro to be used for the headers, which are taken from a database (the CMS), so normally I'd just use a static image, but with there being a CMS, and thus dynamic content, this is impossible.

My solution: create a script that generates an image on-the-fly.

The script works perfectly on the left menu, but there are issues when a menu item is clicked and the page slides out. The problem is the matte on the text. A black matte around the text is automatically added so that it appears flawlessly on black backgrounds - my problem is that it's on a white(ish) background, so I get that horrible jaggedy border.

My question is how to change the matte to white or remove it completely, as I know from using Photoshop and the like that you can save 24-bit PNG's that work fine on any background. Below is my current code, please note that the left menu uses 'Gill Sans', which is why there are if-statements - the font is not the issue as the same problem occurs if I use Gills Sans in the slide-out area.

Code: Select all

<?php
 
    $im = imagecreatetruecolor(280, 20);
 
    $string = $_GET['text'];
 
    // Make the bg color transparent
    $black = imagecolorallocate($im, 0, 0, 0);
    $transparent = imagecolortransparent($im, $black);
 
    // Set the text color
    if(empty($_GET['font'])){
        $textcolor = ImageColorAllocate($im, 255, 255, 255);
    } else if($_GET['font'] == 'gillsans'){
        $textcolor = ImageColorAllocate($im, 255, 255, 255);
    } else if($_GET['font'] == 'trajan'){
        $textcolor = ImageColorAllocate($im, 253, 6, 61);
    }
     
 
    // Set the font
    if(empty($_GET['font'])){
        $font = 'GIL.TTF';
    } else if($_GET['font'] == 'gillsans'){
        $font = 'GIL.TTF';
    } else if($_GET['font'] == 'trajan'){
        $font = 'TRAJAN.TTF';
    }
    
    // Write the text
    if(empty($_GET['font'])){
        imagettftext($im, 12, 0, 0, 15, $textcolor, $font, $string);
    } else if($_GET['font'] == 'gillsans'){
        imagettftext($im, 12, 0, 0, 15, $textcolor, $font, $string);
    } else if($_GET['font'] == 'trajan'){
        imagettftext($im, 14, 0, 0, 15, $textcolor, $font, $string);
    }
    
 
    // Output the png
    header("Content-type: image/png");
 
    imagepng($im, NULL, 0, PNG_ALL_FILTERS);
    imagedestroy($im);
    
?>

Re: GD Lib TTF Font Mattes

Posted: Thu Oct 01, 2009 4:03 am
by onion2k
Draw the text on a true colour transparent image ... http://www.phpgd.com/scripts.php?script=27 will help you make one.

Re: GD Lib TTF Font Mattes

Posted: Thu Oct 01, 2009 4:20 am
by mikemike
That's the ticket :)

Bit strange that I need an initial image and can't just make one from scratch - glad it's working though. Thanks a lot.

Re: GD Lib TTF Font Mattes

Posted: Thu Oct 01, 2009 4:45 am
by onion2k
mikemike wrote:That's the ticket :)

Bit strange that I need an initial image and can't just make one from scratch - glad it's working though. Thanks a lot.
imagecreate() and imagecreatetruecolor() both create images with a solid background ... the colour of the first assigned colour in imagecreate()'s case, and black in imagecreatetruecolor()'s case. As you're anti-aliasing the text imagecolor() won't work very well because it's 8 bit and rubbish. So you need to override the black background of imagecreatetruecolor(). There is an alternative to opening an image and rescaling it ... you can loop through all the pixels in the image and set their alpha value to 128. My way of opening an image is just quicker.

Re: GD Lib TTF Font Mattes

Posted: Thu Oct 01, 2009 7:06 am
by mikemike
Just all seems quite long-winded really, but more adept I think. I prefer ImageMagick but hate having to use exec() for anything