Adding and resizing GD images to a Page

This tutorial will show the reader just how easy it is to read an image file in dynamically and resize it to fit a certain position on the page. This will be quick and simple.

Okay, say we have a page called index.php which looks like:

<img src="makeImage.php?location=$avatar&amp;amp;amp;amp;size=$page" />

Now the makeImage.php file is the file which will allow us to read in the image and resize it as we like. The location variable is the location and the size variable is the new size we want it. As a note on the size variable I think it easier for me and the server to keep sizes in the makeImage.php file and give them names like “frntPage” and then just called that name in the $_GET.

We need the makeImage.php page now so:


		//$_GET variables preperation
			$page = $_GET['page'];

				$avatar = $_GET['atr'];
				//if not image exists use default
				if($avatar == ''){
					$avatar = "default.png";
				$file = $avatar;
				//create new image
				$image = imagecreatefrompng($file);
				$width = imagesx($image);
				$height = imagesy($image);
				//with this height
				if($page == 'kb_ucp'){
					$new_width = 50;
					$new_height = 50;
				if($page == 'frntpg'){
					$new_width = 46;
					$new_height = 46;
                if($page == 'usrv'){
                    $new_width = 134;
                    $new_height = 105;
                if($page == 'ucpb'){
                    $new_width = 28;
                    $new_height = 28;
                if($page == 'search'){
                    $new_width = 25;
                    $new_height = 25;
                if($page == 'viewvid'){
                    $new_width = 56;
                    $new_height = 56;
                if($page == 'comments'){
                    $new_width = 40;
                    $new_height = 40;

				//create the final image
				$image_resized = imagecreatetruecolor($new_width, $new_height);
				imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
				//send it out to the page
				header('Content-type: image/jpeg');

				echo 'atr is empty!';
			echo 'page is wrong!';

An other example of the GD image page is making an image and sending it out. The code below would allow the reader to make a simple verification image they can use on their site to help stop spam:

//Send a generated image to the browser

function create_image()
    //Let's generate a totally random string using md5
    $md5 = md5(rand(0,999)); 
    //We don't need a 32 character long string so we trim it down to 5 
    $pass = substr($md5, 10, 5); 
    $_SESSION['image_random_value'] = $pass;
    //Set the image width and height
    $width = 200;
    $height = 100; 

    //Create the image resource 
    $image = ImageCreate($width, $height);  

    //We are making three colors, white, black and gray
    $white = ImageColorAllocate($image, 255, 255, 255);
    $black = ImageColorAllocate($image, 0, 0, 0);
    $grey = ImageColorAllocate($image, 204, 204, 204);

    //Make the background black 
    ImageFill($image, 0, 0, $black); 

    //Add randomly generated string in white to the image
    //ImageString($image, 3, 30, 3, $pass, $white); 

    //Throw in some lines to make it a little bit harder for any bots to break 
    imageline($image, 0, $height/2, $width, $height/2, $grey); 
    imageline($image, $width/2, 0, $width/2, $height, $grey); 
    //Tell the browser what kind of file is come in 
    header("Content-Type: image/jpeg"); 

    //Output the newly created image in jpeg format 
    //Free up resources

So armed with this new knowledge the reader should be able to understand how to place GD images into a document, not only dynamically grabbed from directory but also created from scratch.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s