Poor font quality in php code (imagettftext)

Question

Can't solve this issue even after long time google and many ways tried, but still no luck.

Font quality in .php file is very poor, downloaded same font from different websites - no luck (still in bad quality), downloaded even random font from google fonts (thought maybe my downloaded font is broken for unknown reasons) - still no luck.

Have no idea how to solve this and make it in proper quality that output on the image.

Form code:

<div class="s box hide" id="div3">
                   
                    <label></label> <input type="text" style="text-transform: uppercase;"   placeholder="Iki 6 skaitmenų" pattern="[A-Za-z0-9]+"  class="form-control" name="txt_input_" maxlength="6" >
                </div>
                <br>
        <label><input type="radio" name="check" onclick="show3();" value="s">Individual</label>
        </div>
<div class="button-row">
            <input type="submit" id="submit" name="submit" class="btn btn-info" value="Generate">
        </div>

Main php function code (which generates everything):

if (isset($_POST['submit'])) {
    
    
    $check = $_POST['check'];
    
    
    if($check == 's'){
        
    $txt_input_ = $_POST['txt_input_'];
     $countNumber = strlen($txt_input_);
    $txt_input_ = strtoupper($txt_input_);
    $num_input = $_POST['num_input'];
    $width = 680;
    $height = 240;
    
    $textImage = imagecreate($width, $height);
    $grey = imagecolorallocate($textImage, 100, 100, 100);
    $white = imagecolorallocate($textImage, 255, 255, 255);
    imagecolortransparent($textImage, 0);
    $color = imagecolorallocate($textImage, 0, 0, 0);
   
    
    
    // create background image layer
    $background = imagecreatefromjpeg('http://sample-domain.com/greyspace.jpg');
    $font = "Roboto-Bold.ttf"; 

    //imagestring($textImage, 5, 110, 20, $input_text, 0xFFFFFF);
    
    if($countNumber ==1){
    imagettftext($textImage, 60, 0, 200, 83, $color, $font, $txt_input_);
    }
    
    if($countNumber ==2){
    imagettftext($textImage, 60, 0, 180, 83, $color, $font, $txt_input_);
    }
    if($countNumber ==3){
    imagettftext($textImage, 60, 0, 155, 83, $color, $font, $txt_input_);
    }
    if($countNumber ==4){
    imagettftext($textImage, 60, 0, 135, 83, $color, $font, $txt_input_);
    }
    if($countNumber ==5){
    imagettftext($textImage, 60, 0, 125, 83, $color, $font, $txt_input_);
    }
    
    if($countNumber ==6){
    imagettftext($textImage, 60, 0, 105, 83, $color, $font, $txt_input_);
    }
    

    // Merge background image and text image layers
   imagecopymerge($background, $textImage, 0, 0, 0, 0, $width, $height, 99);
    
    $width = 680;
    $height = 240;
    $output = imagecreatetruecolor($width, $height);
    imagecopy($output, $background, 0, 0, 0, 0, $width, $height);
    
    
    ob_start();

    imagejpeg($output);
    printf('<img id="output" src="data:image/jpeg;base64,%s" />', base64_encode(ob_get_clean()));
         ob_start();
     imagejpeg($output);
     
     printf('<br><br><a id="" href="data:image/jpeg;base64,%s" download><input type="button" value="Download"></a>', base64_encode(ob_get_clean()));
     
    }

In main result my font quality in generated jpeg (tried with png either - still same quality):

In picture symbol edges is so sharp and like in pixels, well obviously it's in not best condition. Any suggestions how to get away from this headache? Thanks in advance!

Answer 1

The way to fix this properly is to use an image that has a proper background colour, even if that background colour is transparent. This makes the image library use a proper alpha-channel (which is the only sensible way of doing alpha blending) rather than using an indexed based alpha, where only one 'colour' is transparent and all the others are fully opaque.