How to Write Text on an Image in PHP

Overview

Adding text to images dynamically can serve various purposes, from watermarking photos to creating personalized e-cards. In PHP, the GD library is a powerful tool that can be used to manipulate images in a wide variety of ways including writing text over them. In this tutorial, you’ll learn how to use PHP to write text on an image, save it, or output it directly to the browser.

Introduction to PHP GD Library

The PHP GD library is an open-source code library for the dynamic creation of images. It allows you to create images in various formats like JPEG, PNG, GIF, etc., directly from PHP scripts. Before we start, ensure that the GD library is enabled on your server. You can check by creating a file with the phpinfo() function. If it’s not enabled, you can install it or ask your hosting provider to install it for you.

Preparation Steps

First, you’ll need an image file on which you want to write text. For the purposes of this guide, we’ll assume this image is called ‘background.jpg’.

Ensure ‘background.jpg’ is in the same directory as your PHP script, or adjust the file path in the code accordingly.

Steps to Write Text on the Image

1. Load Your Image
   

   Use the imagecreatefromjpeg() function (or imagecreatefrompng(), imagecreatefromgif() for other formats) to load your image into PHP.

2. Select Font and Color
   

   Choose the font size, type, and color for the text. The imagettftext() function will be used to write TrueType text to the image, so you need to have a .ttf font file.

3. Define the Text
   

   Decide on the string of text you want to add and for this tutorial let us use ‘Sample Text’.
4. Place the Text on the Image
   

   Calculate where you want the text to appear on the image and write it.

5. Output or Save the Image
   

   After writing the text, you can choose to output the image directly to the browser or to save it to a file on the server.

Sample PHP Script

<?php
header('Content-Type: image/jpeg');

// Load the image
$im = imagecreatefromjpeg('background.jpg');

// Create some colors
text_color or NULL if you want to use PNG's alpha channel
$font = './arial.ttf'; // Path to the TTF font file
$font_size = 20; // Size in points
$angle = 0; // Font angle in degrees

// Text position coordinates
text_color on image resource im, $font_size, $text color, text); // Write the text to the image

// Save image or send it directly to the browser
imagejpeg($im, NULL, 90); // Output to browser with 90% quality
// OR you can save it locally with a filename
text_color);
imagejpeg($font, $font_size, $angle, $text);
imagejpeg($font, $font_size, $angle, $text);

// ... other code

Best Practices and Additional Tips

Writing text on an image has several practical uses, such as creating thumbnails with embedded date and time, generating captcha images, or even watermarking photos for copyright protection. However, it’s not just about getting the text on the image; the way it’s presented is equally important for readability and aesthetic appeal. Here are some tips for making your text visually appealing:

• Contrast: Be sure that the text color you choose contrasts well with the background image so that the text is readable.
• Size: The font size should be large enough to be readable but not so large as to overpower the image.
• Position: Choose a place on the image that draws attention but doesn’t obstruct any important elements of the background image.
• Fonts: Selection of a good font can make a big difference. Go for a font that complements the mood of the background image.
• Transparency: For watermarks and overlays, you may want to use a transparent text color. Use the imagecolorallocatealpha() function in GD to achieve this effect.
• Encoding: When working with non-English text, you’ll need to ensure that the character encoding is correct, especially for TrueType fonts.

Conclusion

Now that you have the foundational knowledge for how to write text on an image using PHP and GD, you can start creating your own dynamic images. Experiment with different fonts, positions, and colors to best match the aesthetic you’re aiming for. Whether you’re creating dynamic banners, watermarks, or informative photo captions, the techniques you’ve learned here will provide a solid starting point for your projects.

You can take your image manipulation skills further by exploring the GD library’s advanced capabilities, such as layering images, resizing, cropping, rotating, and applying filters. With the combination of HTML, CSS, JavaScript, and PHP, the possibilities for creative web development with images are nearly limitless.