Using php GD Library to write text over images using TrueType fonts

Alvaro Trigo

Updated on: February 08, 2024

Once i needed to write text over an image and generate a final image with it.
In order to do it, i used the php GD library functions and a TrueType font as i wanted to use high font sizes.

Now, i have created a PHP class to facilitate all this process.
It is compatible with the following image formats:

jpg / jpeg
png
gif
wbmp

And it allows us to positionate the text wherever we want under predefied positions or custom ones.

It is extremely simple to use, see this example:

require_once 'class.textPainter.php';
$img = new textPainter('./imgs/image.jpg', 'Hello world!!', './Franklin.ttf', 50);
$img->show();
Code language: PHP (php)

That would be all, for the most simple case.

See Demo

View on GitHub

Code for my demo

As an example of how to use it, you can take a look at the code of my demo:

WRITINGOVERIMAGEFILE.PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Floating window with tabs</title>

<style>

/*
This defines the workspace where i place the demo.
*/
#container {
    text-align: left;
    background: #FFF;
    width: 865px;
    margin: 20px auto;
    padding: 20px;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    -moz-box-shadow: 0px 0px 10px #BBB;
    -webkit-box-shadow: 0px 0px 10px #BBB;
    box-shadow: 0px 0px 10px #BBB;
}
</style>

</head>
<body>


<div id="container">
    <?php
        if($_POST["sending"]=="yes"){
            if(strlen($_POST["text"]<50)){
                echo '
                    <img id="imgFinal" src="writingOverImage.php?size=50&text='.$_POST["text"].'" />

                    <img id="imgFinal" src="writingOverImage.php?x=right&y=center&size=30&r=74&g=50&b=170&text='.$_POST["text"].'" />

                    <img id="imgFinal" src="writingOverImage.php?x=left&y=bottom&size=90&text='.$_POST["text"].'" />
                ';
            }
            else{
                echo "The text is too large for my demo!! ";
            }
        }
        else{
            echo '
                <img id="imgFinal" src="writingOverImage.php?size=50&text=Hello world!!" />
            ';

        }
    ?>
    <form name="formulario" action="" method="post" class="contactoFormulario">
        <div class="caja"><input type="text" name="text" />Text you want to write over the image</div>

        <button class="botonFormulario" type="submit" name="Submit" value="Enviar" />Generate image</button>
        <input type="hidden" name="sending" value="yes" />
    </form>
</div>

</body>
</html>
Code language: HTML, XML (xml)

WRITINGOVERIMAGE.PHP

require_once 'textPainter.php';

$x = $_GET["x"];
$y = $_GET["y"];

$R = $_GET["r"];
$G = $_GET["g"];
$B = $_GET["b"];

$size = $_GET["size"];

$text = $_GET["text"];


$img = new textPainter('./imgs/writingOverImage.jpg', $text, './Franklin.ttf', $size);

if(!empty($x) && !empty($y)){
    $img->setPosition($x, $y);
}

if(!empty($R) && !empty($G) && !empty($B)){
    $img->setTextColor($R,$G,$B);
}

$img->show();
Code language: PHP (php)