Generating Images From Texts in PHP The Easy Way

PHP offers a great set of image generation and processing features that are simple and easy to use. There are processing libraries like GD and Imagick that are very popular PHP extensions and are widely used for image manipulation and processing all around the web.

In this tutorial lesson, you’ll learn how to generate images from texts in PHP and before you scroll further, make sure you have PHP installed on your system. If you do not already have PHP installed, you can download and install XAMPP for Windows and get started.

XAMPP is a fully-fledged local PHP development server, installs in minutes and starts working immediately. Please note that if you installed PHP manually, make sure it has the GD extension enabled and working,

Here’s the list of things you’d need before you start writing the code

  1. Working PHP Installation with GD or Imagick LIbrary extension (Download XAMPP)
  2. Web Browser
  3. Code Editor, (VSCode, Sublime Text) or even Notepad will do

Let’s generate some images from text

Now, if you’ve completed the setup process and tested it, let’s generate some images from text in PHP. In your document root directory create a PHP file name it index.php,

We will use the native PHP functions to generate images, you can find the documentation of these functions on the official PHP website. In your index file add these codes below. The comments above the lines explain its purpose.

<?php

// Tells the browser it's an image
header("Content-Type: image/png");

// Create an image canvas with given dimensions
$image = imagecreate(730, 410);

// Add color to the canvas
imagecolorallocate($image, 255, 11 , 0);

// The Text Color
$text_color = imagecolorallocate($image, 255, 255, 255);

// Insert text at specified position
imagestring($image, 5, 50, 50,  "Metabust", $text_color);

// Output a png image
imagepng($image);

// Destroy the image data
imagedestroy($image);

When you run the script with the code given above, you’ll see a large red rectangle with a sample text as shown below and we have now created a text overlay on a canvas.

We are not done yet, as the font size you see cannot be enlarged further because we are using the default font provided by the interpreter and also function imagestring() accepts an integer between 1-5 for the font size which is certainly not usable. We need some more control.

Using custom font face and font size

In order to use another font style or large font size when generating images from text in PHP, we will have to use another function imagefttext(). This function requires the created image, font size, angle, x-position, y-position, color, font file path and text as arguments. Let’s modify the code above and check the output.

<?php

// Tells the browser it's an image
header("Content-Type: image/png");

// Create an image canvas with given dimensions
$image = imagecreate(730, 410);

// Add color to the canvas
imagecolorallocate($image, 255, 11 , 0);

// The Text Color
$text_color = imagecolorallocate($image, 255, 255, 255);

// Insert text at specified position
imagefttext($image, 25, 0, 100, 100, $text_color, __DIR__."/NotoSans-Regular.ttf", wordwrap("The quick brown fox jumps over the lazy dog.", 30));

// Output a png image
imagepng($image);

// Destroy the image data
imagedestroy($image);

In the code above, as you can see we are using imagefttext() method to generate string over the image. We are using NotoSans font which is available for free on Google Fonts. You are free to use any font of your choice, just place it in a directory and use the absolute path to the file within the function.

In our case, we have placed the file in the same directory as our index.php file and point to it using __DIR__ (a Magic Constant that gets the current directory path). You can also see we are using the PHP wordwrap() method with the text and specified limit, to break the sentence in multiple lines.

Now when you run the code, you’d get the following output which is good enough for now.

Placing Text Over an Image

If you want to overlay a text on an image rather than a colored canvas you can simply use the image create PHP functions with a path to an image you want to overlay on in place of imagecreate() function.

<?php

// Tells the browser it's an image
header("Content-Type: image/png");

// Create an image canvas with given dimensions
$image = imagecreatefrompng('test.png');

// Add color to the canvas
imagecolorallocate($image, 255, 11 , 0);

// The Text Color
$text_color = imagecolorallocate($image, 0, 0, 255);

// Insert text at specified position
imagefttext($image, 60, 0, 190, 70, $text_color, __DIR__."/NotoSans-Regular.ttf", wordwrap("The quick brown fox jumps over the lazy dog.", 30));

// Output a png image
imagepng($image);

// Destroy the image data
imagedestroy($image);

Executing the code gives the following output:

There are other tons of useful methods available on the official PHP website. Make sure to check them out.

Metabust

Metabust helps you learn new things, you will find all those computers, internet software and tech related stuffs you always need to sustain your life.

Leave a Reply

Close Menu