Imagecreatefrompng () + imagettftext () low quality text - how to smooth

Question

Take the following base image (PNG-24):

We are trying to write text on 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 creates low quality text (very blocky) - how would one anti-alias of the text make it look smooth?

This is the block version:

After a more thorough analysis of the png rendering (enlarged in Photoshop), I see that the text I write has no smoothing, and the pixels written are almost transparent?

What causes this - how to get smooth text?

Answer 1

Explanation

imagealphablending must be enabled when using imagettftext on an image with true color, otherwise anti-aliasing will be calculated against the color of the color images of the images instead of the color of each destination pixel.

Correct (explicit) setting:

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

By default, the image is turned on, so setting false previously created a smoothing effect.

Answer 2

It revealed:

My call to imagealphablending() and imagesavealpha() is what calls it! If I call them after writing the text, it will be fine!

(not sure why, though - an explanation will be interesting)

Below is the working code for 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); } } ?>