5092_Ch08_FINAL 8/26/05 9:53 AM Page 329 8-5 ■ CREATING AND USING COLORS How It Works This particular example is a matter of aesthetics By using the imagefilledrectangle() function, you create what is essentially a white image with a 1-pixel line around the edge This will serve as the basic template for outputting the bar graph, which we will explain in more detail in the next example The prototype for imagefilledrectangle() is as follows: int imagefilledrectangle (resource img, int x1, int y1, int x2, int y2, int color) Figure 8-4 shows some output of recipe 8-4 Figure 8-4 Output of recipe 8-4 8-5 Creating and Using Colors Because we are dealing with a graphical topic, the concept of what color to display it in is a rather important one As mentioned, colors for dynamic imaging are handled in an RGB method To apply colors to a particular element of a dynamic image, you must first allocate the color to a variable resource that can then be used on other image elements You use the imagecolorallocate() function to facilitate this necessity The following example shows how to start using the new colors to create a title for the graph 329 5092_Ch08_FINAL 330 8/26/05 9:53 AM Page 330 8-5 ■ CREATING AND USING COLORS The Code 5092_Ch08_FINAL 8/26/05 9:53 AM Page 331 8-6 ■ CREATING AND APPLYING DIFFERENT SHAPES AND PATTERNS How It Works As you can see in this example, you are beginning to turn the little graphing system into a more cohesive image By using some green and blue color allocations, the image is starting to obtain some style Keep in mind that you can use hex values or numerical values when setting up color allocations, so use what is most efficient for your project Also note how easy it is to center text By using the function imagefontwidth(), you can determine how long each character will be using the current font By using a little math, you can easily determine where the X coordinate should begin in order to allow the text to sit squarely in the middle, regardless of what that text may be Figure 8-5 shows some output of recipe 8-5 Figure 8-5 Sample output of recipe 8-5 8-6 Creating and Applying Different Shapes and Patterns Using shapes and patterns is where the current application will begin to shine By calculating values from the current data, you can create bar graphs or pie graphs that will show off the data in a usable format PHP supports a wide range of shapes and patterns including rectangles, ellipses, lines, and polygons Choose the best fit for the job and a couple of nice colors, and away you go 331 5092_Ch08_FINAL 332 8/26/05 9:53 AM Page 332 8-6 ■ CREATING AND APPLYING DIFFERENT SHAPES AND PATTERNS The Code How It Works Here is where things get a tad tricky Since you are dealing with a fixed-width table, you need to create an algorithm that can deduce a maximum-sized bar to be displayed depending on the number of values you need to display After that, the script must be able to also figure out a scale of sorts Since in this case you are using a scale of one to ten, you can easily figure out how many units of pixel height each increment in the number should indicate by taking the maximum height and dividing it by ten If you needed to create a scale on the fly, you could simply create an algorithm that would check for the highest and lowest values in the data set and then create a range from that Once you have figured out how wide and how tall each unit on the graph should be, it is a simple matter to run through the array and create the appropriately sized bar For aesthetics, you can also apply a black outline to the bars to make them look nice The black bar was easy to apply after figuring out the original green bars, as it is simply a matter of setting the same bar, just one pixel bigger Figure 8-6 shows some output of recipe 8-6 333 5092_Ch08_FINAL 334 8/26/05 9:53 AM Page 334 8-7 ■ OUTPUTTING AN IMAGE Figure 8-6 Output of recipe 8-6 8-7 Outputting an Image One of the more powerful features to note about PHP 5’s dynamic imaging is that you can call a PHP script that outputs a dynamic image from within an IMG tag’s SRC attribute, even from a server that is not currently set up to handle PHP Time and again this sort of functionality has allowed companies to produce web-ready applications that can be distributed even on websites that support only HTML You can even pass arguments in as $_GET values, which means you can use the script on the receiving end to retrieve a value through the SRC attribute and then display the image based on that argument For instance, you could have a polling system in place that will dynamically display the results of a poll based on the ID number passed to the script By doing this, you can recycle code and have it ready for use by anyone who passes the script a correct argument Naturally, some validation will be in order, but you can begin to see just how powerful this can be The following example shows how to call the bar graph building function, but instead of getting the values from an array, you will pass them into the script from the SRC attribute using a $_GET method 5092_Ch08_FINAL 8/26/05 9:53 AM Page 335 8-7 ■ OUTPUTTING AN IMAGE The Code Sample 8-7 How It Works The code for actually creating the image in this example has changed very little The only real change is where you actually obtain your values If you look at the line of code where you assign your value to the $myvalues array, you will notice that you are now loading the values in dynamically from the $_GET superglobal When you look at the second block of code, you will notice that it references the script via the SRC attribute of the IMG tag On top of all that, you even pass the values to change the bar graph within the SRC tag By using this method, you can create all kinds of ingenious applications including web counters, polling systems, and more Try experimenting with this, and see how far your ingenuity and PHP 5’s dynamic imaging can take you Creating an Image from an Existing Image One of the more powerful aspects of the GD library is the ability to take a premade image and then add to or modify aspects of it on the fly using PHP 5’s dynamic imaging The end result can be some fancy functionality that you probably have already had the opportunity to witness Have you ever seen one of those forms on the Internet that allows you to enter a block of text and then the text shows up on a sign within an image? Did you ever wonder how it was done? Well, let us fill you in on a little secret—it is really not all that difficult 5092_Ch08_FINAL 8/26/05 9:53 AM Page 337 8-8 ■ LOADING AN EXISTING IMAGE 8-8 Loading an Existing Image In the following example, you will see piece by piece how to construct an image that will allow you to write to a dialog box contained within the picture shown in Figure 8-7 Keep in mind that the poor photo victim, Tiger, was neither actually drunk nor is quite as cool as he appears to be That being said, with the power of PHP 5, you can at least create something unique for him to include in his conversation To play with the code for the upcoming examples, please feel free to download the image within the code download at the Apress website Loading the actual image is not much different from creating a blank image The only major difference is in the function call to create the image Rather than using the generic function, imagecreate(), you use the imagecreatefrom… function depending on the file type of the image In the following example, you will use a JPG flavor because of its photorealism The Code Sample 8-8 337 5092_Ch08_FINAL 338 8/26/05 9:53 AM Page 338 8-9 ■ APPLYING MODIFICATIONS TO AN EXISTING IMAGE How It Works The only real new function to learn (and, in fact, the function that makes this whole script work) is imagecreatefromjpeg() Creating a new image from an existing one is almost too easy You simply pass in the location of the file you want to work with, and there you have it— instant image The prototype for the function imagecreatefromjpeg() is as follows: resource imagecreatefromjpeg ( string filename ) Figure 8-7 shows some output from recipe 8-8 Figure 8-7 Output of recipe 8-8 8-9 Applying Modifications to an Existing Image Now that you know how to load an existing image, it is time to start doing something with the image Since the loaded image now acts as something of a canvas, all the tricks you have been using up until now are still quite applicable You can draw shapes, draw lines, and even write words on your new canvas The following example demonstrates how to write onto the new canvas The Code