There are a number of ways to make the forms on your website more user friendly. This article will explain one way of doing this, which eliminates a page reload and replaces it with an image generated on the server.
Submitting a Form Using an Image Tag - GD Methods (Page 5 of 8 )
In order to load an existing image for use by our application, we'll need to use the imagecreatefrompng() function. You can also use other image formats, provided you have the proper support libraries. This function accepts a single argument that is the path to an image as a string. It returns a resource handle to the image that you can then use to work with the image.
If you are going to draw anything with GD, including text, you will need to allocate a color to be used. The imagecolorallocate() function does just that. This function takes as its first argument the resource handle that was created with one of the image creation functions. The remaining three arguments are hexadecimal or numerical RGB values. For instance, allocating a blue color would look like the following:
If you choose, as I did in the example, to use the numerical values to define a color, the numbers must be between 0 and 255. The first value is red, the second green and the third blue. Mixing these three colors will give you any color you might need within the limits of an 8 bit pallet.
In GD you can use true type, postscript or freetype fonts. Your distribution may not have support for all of these. Check your php.ini configuration and the PHP documentation for details.
Whatever font system you use, I would suggest using your own fonts rather than any that are built in. In order to to do this you will need to make some fonts available for use by PHP. Rather than give PHP permission to your fonts directory, make a directory in your Web structure for fonts you might want to use with GD that has the proper permissions assigned to it.
In this example we'll be using True Type fonts. The function for creating text used in this project is imagettftext(). This function takes a whopping eight arguments for this example. The first is the image resource, then the font size as an integer, an angle parameter that allows the text to be drawn at an angle and a horizontal and vertical coordinate as integers. These are followed by the path to the font as a string and the string to print.
In order to center anything, we will need to determine some coordinates. Doing this with the image we just loaded is easy. Using imagesx() (width) and imagesy() (height), we can get the dimensions of the created image. Determining the size of a text block is a little more difficult.