This tutorial will tell you how to dynamically write text to an image in PHP. This is fairly simple, so it will just be the first step in a series of tutorials dealing with images in PHP. The image functions require the GD library to be installed.
Table of Contents
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span>
Adding text to a blank dynamically generated image #
For this tutorial, we’ll first generate a blank PNG image dynamically, and add some text to that. The same techniques can also be applied to existing images however. The code we’re using and the output is below, and below that is an explanation of what the code does.
<?php
// create an image with width 100px, height 20px
$image = imagecreate(100, 20);
// create a red colour for the background
// as it is the first call to imagecolorallocate(), this fills the background automatically
$red_background = imagecolorallocate($image, 255, 0, 0);
// create a black colour for writing on the image
$black = imagecolorallocate($image, 0, 0, 0);
// write the string "tiposaurus" on the image
// the top left of the text is at the position (10, 2)
imagestring($image, 4, 10, 2, 'tiposaurus', $black);
// output the image
// tell the browser what we’re sending it
Header('Content-type: image/png');
// output the image as a png
imagepng($image);
// tidy up
imagedestroy($image);
?>
Code output #
The output of this code is as follows:
Explanation #
The first step is to tell PHP to create the image, we do this with the imagecreate() function, which takes the desired width and height as parameters. This returns the image identifier, which we store in the variable $image.
Next, we use the imagecolorallocate()` function to define some colours for use in our image. This takes as parameters, the image identifier we’re using, then the red, green and blue values for the colour. The first time we call imagecolorallocate() it fills in the background of the image with that colour.
We then use the imagestring() function to write text on the image. This function takes six parameters: the image identifier, an integer 1–5 determining which built in font to use (we’re choosing 4), x and y coordinates giving the top left position of the text, the text to write, and the colour to write it in.
It’s then time to output the image.
First, we need to tell the browser what type of image we’re sending (otherwise the browser would be expecting a text document so the image wouldn’t be displayed correctly), we do this with the line:
Header('Content-type: image/png');
Next, we need to tell PHP to output the image as a PNG, this is done with the imagepng() function, which takes the image identifier as a parameter.
That’s it! The last thing we do is to use the imagedestroy() function to delete the image from memory, it takes the image identifier as a parameter.