Image Stripe Using PHP GD Library

Image Stripe Using PHP GD Library Picture In this tutorial we will create an image stripe using PHP’s file handling capabilities and GD Library. It will read any number of images from a specified folder and join them all to create a single server side generated image stripe. This will provide the basics of File Handling and GD Graphics Library.

By: Aayush

Date: May 9, 2009

Tags: GD Library, PHP

Author: Aayush Shastri

Hello! I'm a freelance web and graphic designer who loves working on anything related to web. I'm currently the website administrator of WebMuch. You can find me on Twitter! and Facebook.

Preview:

Image Stripe Using PHP GD Library
What we are going to do today is quite simple. We will read a specific directory for all available images in it and merge them into a single image. Sounds simple, well it is.

What We Need:

Create a project main folder and create two more folders in it, name them: “css” and “slides” respectively.
In the project main folder create two files, name them: “index.php” and “createImage.php” respectively.
In the slides folder put in some jpeg images with same width and height. In my case I used 300px width and 225px height.

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>PHP GD Library Image Stripe</title>
<!-- stylesheets begin -->

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/master.css" />

<!-- stylesheets end -->
</head>

<body>

<div id="wrap">
	<h2>PHP Image Stripe</h2>
	<div id="slideshow">
		<img src="createImage.php" title="Image Stripe" alt="Image Stripe" />
	</div>
</div><!-- end wrap -->

</body>
</html>

In the above code the only new thing to you should be the source(src attribute) of the image tag, which is the link of our “createImage.php” file, this is because the file itself when executed outputs an image file. Hope that makes sense, it sure will after you read the excessively documented code of “createImage.php” below.

createImage.php:

<?php
$dirPath = 'slides/'; // The path of the directory
$count = 0; // For counting the number of images in the directory

// To check if this is a valid directory
if (is_dir($dirPath)) {
	// Open the directory and make a directory handler called $db
	if ($dh = opendir($dirPath)) {

		// Report all errors except E_WARNING (warnings)
		error_reporting(E_ALL ^ E_WARNING);

		/*
		 *	We have closed the warnings here as there should be no text
		 *	on a page which should be returning as an image otherwise the
		 *	image will not be produced, instead the name of the file will
		 *	be printed.
		 *
		 *	As we are going to use the getimagesize() method to determine
		 *	whether the passed file is an image or not, the method returns
		 *	false when a non image file is passed as a parameter but also
		 *	produces a warning about the same concern, which is why we have
		 *	to disable the warnings in runtime.
		 */

		/*	We start a while loop which runs until the readdir method returns false
		 *	as there are no more files in the directory.
		 *
		 *	each time the loop runs, it enters the next files name in the
		 *	$src variable.
		 */

	while (($filename = readdir($dh)) !== false) {

		/*	getimagesize() method returns false if the file is not an image file.
		 *	Therefore, we check for it to be true as we have passed the file source
		 *	in it, which we created simply by concatinating the $dirPath before
		 *	the $filename.
		 */

		if(getimagesize($dirPath.$filename))
		{

		/*
		 *	We are taking all the "only-image" file names in an array called $imgSrc.
		 *
		 *	$count keeps increasing by 1 if the file is an image and therefore,
		 *	gives us the number of images in the folder. We can get the number
		 *	of images by getting the length of the array as-well and there maybe
		 *	many more methods. But I like it done this way. It is purely a matter
		 *	of choice.
		 */
			$imgSrc[$count] = $dirPath.$filename;
			$count++;
		}
	}

	/*
	 *	As we are creating a horizontal stripe of images we are only
	 *	concerned with the width. First we need to create an Image
	 *	with the dimentions of our final image, therefore we found the
	 *	only the width of our final image because in our case we have
	 *	a static height of our final image.
	 *
	 *	In my case each image in my slides directory has a width of 300px
	 *	and a height of 225px. Therefore, width for a horizontal stripe of
	 *	all images merged will be the number of images multiplied by 300.
	 *
	 *	Which is exactly what I've taken in a variable called $width.
	 *
	 *	Now, for creating an image we have used the imagecreatetruecolor
	 *	method and the resource handler is stored in the variable
	 *	$outputImage.
	 *
	 *	Note: Remember, the height and width of the JPEG's in the slide folder
	 *	must be the same.
	 */

	$width = 300 * $count;
	$outputImage = imagecreatetruecolor($width, 225);

	/*
	 *	We run a loop with the number of images as the limit,
	 *	in which we  create a resource handler for each image
	 *	in the slides folder and then merge it into the Main
	 *	Image i.e. $outputImage.
	 *
	 *	If the loop runs for the first time the "x-coordinate of destination point"
	 *	is static and hard coded as 300 and then for each increament we multiply 300
	 *	by the loop count, this merges the images one after another horizontally
	 *
	 */

		for($i=0; $i<$count; $i++)
		{
			$temp = imagecreatefromjpeg($imgSrc[$i]);
			if($i==0)
				imagecopymerge($outputImage, $temp, 0, 0, 0, 0, 300, 225, 100);
			else
				imagecopymerge($outputImage, $temp, $i*300, 0, 0, 0, 300, 225, 100);

			/*
			 *	Syntax Explaination
			 *
				imagecopymerge(
						Destination image link resource,
						Source image link resource,
						x-coordinate of destination point,
						y-coordinate of destination point,
						x-coordinate of source point,
						y-coordinate of source point,
						Source width,
						Source height,
						alpha transparency
				)
			*/

		}
	}
}

// For displaying the image as the output.

header('Content-type: image/jpeg');
imagejpeg($outputImage);

// Destroying the resourse handler.
imagedestroy($outputImage);

/*
 *	Reporting all errors. Switching it back on,
 *	as the image has already been produced and displayed.
 */
error_reporting(E_ALL);
?>

Note: Remember, the height and width of the JPEG’s in the slides folder must be the same.
Note: imagecreatetruecolor() method does not support GIF images.