Use your left/right keys to browse tutorials
PHP GD generate an image with text and font embedding

PHP GD generate an image with text and font embedding

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 18, 2013

PHP isn’t limited to just generating HTML. It can also be used to create and manipulate image files in a variety of formats. I recently worked on a project where we had to generate an image for the user and include their name flattened into it. It’s extremely easy to do with PHP. Admittedly the demo I’ve put together for this tutorial is rather extravagant! but it serves the purpose to explain how to use the PHP GD image library.

The Code


// link to the font file no the server
$fontname = 'font/Capriola-Regular.ttf';
// controls the spacing between text
$i=30;
//JPG image quality 0-100
$quality = 85;

function create_image($user){

		global $fontname;	
		global $quality;
		$file = "covers/".md5($user[0]['name'].$user[1]['name'].$user[2]['name']).".jpg";	
	
	// if the file already exists dont create it again just serve up the original	
	if (!file_exists($file)) {	
			
			// define the base image that we lay our text on
			$im = imagecreatefromjpeg("pass.jpg");
			
			// setup the text colours
			$color['grey'] = imagecolorallocate($im, 54, 56, 60);
			$color['green'] = imagecolorallocate($im, 55, 189, 102);
			
			// this defines the starting height for the text block
			$y = imagesy($im) - $height - 365;
			 
		// loop through the array and write the text	
		foreach ($user as $value){
			// center the text in our image - returns the x value
			$x = center_text($value['name'], $value['font-size']);	
			imagettftext($im, $value['font-size'], 0, $x, $y+$i, $color[$value['color']], $fontname,$value['name']);
			// add 32px to the line height for the next text block
			$i = $i+32;	
			
		}
			// create the image
			imagejpeg($im, $file, $quality);
			
	}
						
		return $file;	
}

function center_text($string, $font_size){

			global $fontname;

			$image_width = 800;
			$dimensions = imagettfbbox($font_size, 0, $fontname, $string);
			
			return ceil(($image_width - $dimensions[4]) / 2);				
}

	$user = array(
	
		array(
			'name'=> 'Ashley Ford', 
			'font-size'=>'27',
			'color'=>'grey'),
			
		array(
			'name'=> 'Technical Director',
			'font-size'=>'16',
			'color'=>'grey'),
			
		array(
			'name'=> 'ashley[at]papermashup.com',
			'font-size'=>'13',
			'color'=>'green'
			)			
	);

// run the script to create the image
$filename = create_image($user);

Running the code

I’ve created two functions to make it as simple as possible. to run the code simply pass the $user array data to the function and it’ll save the new image in the folder ‘covers’ on your server. The function returns the file url so you just need to echo it into an image tag as shown below. Check out the demo where you can create your own.


$filename = create_image($user);

<img src="<?=$filename;?>" width="800" height="600"/>

GD vs ImageMagick

On a performance level there’s not much between the two libraries ImageMagick has more options for example text rotation. you can find out more about ImageMagick here and GD here.

Demo Download



More tutorials from Papermashup
  • Matt

    Could the image be saved, and could a link be made to allow the person to share through facebook/twitter/email? How could this be done?

  • http://www.tweeeeeet.me andrew

    I have changed the text boxes to a single text area but have no idea how to define the width of the generated text and it passes the width of the image. Any ideas?

  • Gun

    Is it also possible for frontend user to change font, fontcolor and size. So yes how? Thanks!