How to use images created with gdLibrary

Published on June 16th, 2007 by admin

I've gotten a lot of comments along the lines of, "how do I use my image after I've created it?." So I thought this was a good opportunity to write another tutorial.

Note: This tutorial is a supplement to my other tutorials. If you are interested in manipulating images with gdLibrary please try any of these first.

What you will need

  • A server with php installed and gdLibrary enabled.
  • An image script generated with gdLibrary.
  • A pure text editor, I like Eclipse.

Introduction

In PHP there are two ways to output an image. Each of these has their advantages and disadvantages. These will be discussed later in the tutorial.

  1. Output to an image file.
  2. Output to the header.

Part One: Output to an image file.

At the end of every gdLibrary script there is the following code.

ImageJpeg($canvas);
ImageDestroy($canvas);

To output the image to a file simply add the file path to the ImageJpeg function.

ImageJpeg($canvas, "some_path/my_image.jpg");
ImageDestroy($canvas);

A good way to use this technique is to package your code into a function and add this bit of code at the end.

function myFunction()
{
/*

Your code goes here

*/

ImageJpeg($canvas, "some_path/my_image.jpg");
ImageDestroy($canvas);
}

This function will run and then save the image to the folder of your choice. Nothing could be better :).

Advantages

You only have to generate the image once.

You can reference the image like any other.
(<img src = “somepath/my_generated_image.jpg” />)

Speed! Because you’re not generating the image every time, this is by far the fastest option.

Disadvantages

There is the potential of having thousands (or even tens of thousands) of different images. (such as generating thumbnails)
Managing that many thumbnails can prove daunting (if not impossible).

Part Two: Output to the header.

In order to output to the header you have to tell the server to output this file as an image.

header("content-type: image/jpeg"); //<- telling the server that this is an image
ImageJpeg($canvas);
ImageDestroy($canvas);

The server won’t save a copy of the image so in order to see it you have to preview it in the browser.
This brings up the question, how do I pass data to my image? Simple, through the browser!

Passing data

Take a look at this code.

$myImage = "<img src="/image_file.php?var=some_image.jpg" alt="" />"; 

Does this look familiar? It should! I just pass data to the file like I would any other PHP file and then set that php file as the source in an image tag. Ahhh the beauty of PHP :).

Ok now what if I want to pass a lot of data through the header? Such as an array? Is this possible? You bet it is!

The Serialize Function

PHP comes with a function called serialize. It converts any data into a byte-stream representation that can be interpreted by the server. In this way we can send all kinds of data.

This function is also helpful as it stores the datatype and structure. So you can actually send an array or an object!

The serialize function can be used like this.

This code does NOT go into your php image file. Instead this goes into the file that is referencing your php image file.

$myArray          = array(1,3,5,11,21,31,5,3,1,3,4);
$serialized_array = serialize($myArray);
$myImage          = "<img src="/image_file.php?array=$serialized_array" alt="" />"; 

Inside your php image file type the following code.

//you retrieve your array from the header by using the unserialize function.
$myArray = unserialize($_GET['array']);

/*

Your gd code here

*/
header("content-type: image/jpeg");
ImageJpeg($canvas);
ImageDestroy($canvas);

Note: The serialize function isn’t limited to just this, you can use it to pass data whenever you want.

Advantages

You don’t have to store any images to the server, it generates them on the fly.

You can change the look for all your generated images quickly and easily.

Disadvantages

It can be quite slow as it has to generate a new image everytime. It can be especially slow when dealing with a lot of data. (such as statistics for a chart.)

Conclusion

I hope you found this tutorial useful. If you have any questions or suggestions please feel free to post in my comments.

Leave a Reply




Comments

  • Post by Daniels on May 28, 2009

    Thanks!!! This tutorial was very useful because it was just what I was looking for! Informative and easy to understand.

Popular Posts

Posts By Category

Supported by