imagecreatefrompng() + imagettftext() low quality text - how to anti alias

Question

Take the following base image (PNG-24):

We're trying to write text to the image as follows:

<?
ini_set('display_errors', 1); 
error_reporting(E_ALL);

//#### Load the base image
$im = imagecreatefrompng("images/SpecialClearanceBlank.png");
imagealphablending($im, false);
imagesavealpha($im, true);

//#### Create the badge
if($im) {
    //#### define some colours to use with the image
    $white = imagecolorallocate($im, 255, 255, 255);

    //#### get the width and the height of the base image
    $width = imagesx($im);
    $height = imagesy($im);

    //#### Define font and text
    $font = "/var/www/arial.ttf";
    $fontSize = 13;
    $angle = 0;
    $text = "15%";

    //#### calculate the left position of the text:
    $dimensions = imagettfbbox($fontSize, $angle, $font, $text);
    $textWidth = abs($dimensions[4] - $dimensions[0]);
    $leftTextPos = ( $width - $textWidth ) / 2;

    //#### finally, write the string:
    //imagestring($im, 5, $leftTextPos, $topTextPos, $text, $white);
    imagettftext($im, $fontSize, $angle, $leftTextPos + 1, 29, $white, $font, $text);

    // output the image
    // tell the browser what we're sending it
    Header('Content-type: image/png');
    // output the image as a png
    imagepng($im);

    // tidy up
    imagedestroy($im);
}

?>

This is producing low quality text (very blocky) - how would one anti alias the text so it looks smooth?

This is the blocky version:

Upon closer analysis of the rendered png (magnified in photoshop) i can see that the text i am writing has no anti aliasing and the pixels being written are almost transparent?

What is causing this - how do i get smooth text?

Answer 1

Explanation:

imagealphablending must be on when using imagettftext on a true-color image, otherwise the aliasing is calculated against the images brackground color instead of the color of each destination pixel.

The correct (explicit) setting would be:

//#### Load the base image
$im = imagecreatefrompng("images/SpecialClearanceBlank.png");
imagealphablending($im, true);
                        ^^^^

Your picture has it enabled by default, that is why setting it to false previously created the non-aliased effect.

Answer 2

Figured it out:

My call to imagealphablending() and imagesavealpha() is what's causing it! If i call these after writing the text it's fine!

(not sure why though - would be interested in an explanation)

Below is the working code to produce this:

<?
Header('Content-type: image/png');

$Percentage = round(@$_GET["value"]);
$root = dirname(__FILE__) . "\\";

//#### Check the Cache
if (file_exists("images/Badges_Discounts/" . $Percentage . ".png") === true) {
    //#### Serve image from cache
    $im = imagecreatefrompng("images/Badges_Discounts/" . $Percentage . ".png");

    //#### Fix transparency
    imagealphablending($im, false);
    imagesavealpha($im, true);

    //#### Output from cache
    imagepng($im);

    //#### tidy up
    imagedestroy($im);

} else {
    //#### Load the base image
    $im = imagecreatefrompng("images/SpecialClearanceBlank.png");

    //#### Create the badge
    if($im) {
        //#### define some colours to use with the image
        $white = imagecolorallocate($im, 255, 255, 255);

        //#### get the width and the height of the base image
        $width = imagesx($im);
        $height = imagesy($im);

        //#### Define font and text
        $font = $root . "arial.ttf";
        $fontSize = 15;
        $angle = 0;
        $text = $Percentage . "%";

        //#### calculate the left position of the text:
        $dimensions = imagettfbbox($fontSize, $angle, $font, $text);
        $textWidth = abs($dimensions[4] - $dimensions[0]);
        $leftTextPos = ( $width - $textWidth ) / 2;

        //#### write the XX%
        imagettftext($im, $fontSize, $angle, $leftTextPos + 1, 26, $white, $font, $text);

        //#### write the word "off"
        $dimensions = imagettfbbox($fontSize, $angle, $font, "off!");
        $textWidth = abs($dimensions[4] - $dimensions[0]);
        $leftTextPos = ( $width - $textWidth ) / 2;
        imagettftext($im, 13, $angle, $leftTextPos + 4, 41, $white, $font, "off");

        //#### Fix transparency
        imagealphablending($im, false);
        imagesavealpha($im, true);

        //#### Save to cache
        imagepng($im, $root . "images\\Badges_Discounts\\" . str_replace("%","",$text) . ".png");

        //#### Output to browser
        imagepng($im);

        //#### tidy up
        imagedestroy($im);
    }
}

?>