Question

I am generating a simple image from an existing png and adding text to it. But the quality is very poor and the result is jaggy, see here. The result does not have to be ultra high quality, just a little bit better than it is. I must be doing something wrong, because this is pretty poor. Any suggestions would be great.

Thank you very much,

Todd

    // customizable variables
    $common_font_file = 'fonts/giddyup.ttf';
    $latin_font_file = 'fonts/comic-sans-ms.ttf';
    $font_color       = '#000000' ;
    $image_file       = 'images/oval_template_large.png';
    $mime_type          = 'image/png' ;
    $extension          = '.png' ;
    $s_end_buffer_size  = 4096 ;

    $common_name = html_entity_decode($_POST["Cname"]);
    $latin_name = html_entity_decode($_POST["Lname"]);
    $common_left_indent = html_entity_decode($_POST["cleftIndent"]);
    $latin_left_indent = html_entity_decode($_POST["lleftIndent"]);
    $common_top_indent = html_entity_decode($_POST["ctopIndent"]);
    $latin_top_indent = html_entity_decode($_POST["ltopIndent"]);
    $common_font_size = html_entity_decode($_POST["cFontSize"])* 72 / 96;
    $latin_font_size = html_entity_decode($_POST["lFontSize"])* 72 / 96;

    $font_rgb = hex_to_rgb($font_color) ;

    // create and measure the common text
    $common_box = @ImageTTFBBox($common_font_size,0,$common_font_file,$common_name) ;
    $common_text_width = abs($common_box[2]-$common_box[0]);
    $common_text_height = abs($common_box[5]-$common_box[3]);

    // create and measure the latin text
    $latin_box = @ImageTTFBBox($latin_font_size,0,$latin_font_file,$latin_name) ;
    $latin_text_width = abs($latin_box[2]-$latin_box[0]);
    $latin_text_height = abs($latin_box[5]-$latin_box[3]);

    $image =  imagecreatefrompng($image_file);

    if(!$image || (!$common_box && !$latin_box))
    {
        fatal_error('Error: The server could not create this image.') ;
    }

    // allocate colors and measure final text position
    $font_color = ImageColorAllocate($image,$font_rgb['red'],$font_rgb['green'],$font_rgb['blue']);
    $image_width = imagesx($image);


    $put_common_text_x = $common_left_indent;
    $put_common_text_y = $common_top_indent + $common_text_height;

    $put_latin_text_x = $latin_left_indent;
    $put_latin_text_y = $latin_text_height + $latin_top_indent ;


    // Write the text
    imagettftext($image, $common_font_size, 0, $put_common_text_x, $put_common_text_y, $font_color, $common_font_file, $common_name);
    // Write the text
    imagettftext($image, $latin_font_size, 0, $put_latin_text_x, $put_latin_text_y, $font_color, $latin_font_file, $latin_name);


    header('Content-type: ' . $mime_type) ;
    ImagePNG($image) ;

    ImageDestroy($image) ;
    exit ;

Answer 1

GD’s text functions do not antialias the text they’re drawing. The simplest way around this is to produce your image at least 2x or 4x bigger than the final product, and do a resizing later, which will do a bit of smooting as a side effect of the resizing.