Image Creation from User Input

In addition to creating images from other images and drawing images on your own, you can also create images based on user input. There's no fundamental difference in how the scripts are created except for the fact that you'll be gathering values from a form instead of hard-coding them into your script.

In Listing 14.7, we create an all-in-one form and script, which asks for user input for a variety of attributes ranging from image size to text and background colors, as well as a message string. You'll be introduced to the imagestring() function, which is used to "write" a string onto an image.

Listing 14.7. Creating an Image from User Input

 1: if (!$_POST) { 2:     //show form 3:     echo " 4:     <html> 5:     <head> 6:     <title>Image Creation Form</title> 7:     </head> 8:     <body> 9:     <h1>Create an Image</h1> 10:    <form method=\"POST\" action=\"".$_SERVER["PHP_SELF"]."\"> 11:    <p><strong>Image Size:</strong><br/> 12:    W: <input type=\"text\" name=\"w\" size=\"5\" maxlength=\"5\" /> 13:    H: <input type=\"text\" name=\"h\" size=\"5\" maxlength=\"5\" /></p> 14:    <p><strong>Background Color:</strong><br /> 15:    R: <input type=\"text\" name=\"b_r\" size=\"3\" maxlength=\"3\" /> 16:    G: <input type=\"text\" name=\"b_g\" size=\"3\" maxlength=\"3\" /> 17:    B: <input type=\"text\" name=\"b_b\" size=\"3\" maxlength=\"3\" /></p> 18:    <p><strong>Text Color:</strong><br /> 19:    R: <input type=\"text\" name=\"t_r\" size=\"3\" maxlength=\"3\" /> 20:   G: <input type=\"text\" name=\"t_g\" size=\"3\" maxlength=\"3\" /> 21:   B: <input type=\"text\" name=\"t_b\" size=\"3\" maxlength=\"3\" /></p> 22:   <p><strong>Text String:</strong><br /> 23:   <input type=\"text\" name=\"string\" size=35 /></p> 24:   <p><strong>Font Size:</strong><br /> 25:   <select name=\"font_size\"> 26:   <option value=\"1\">1</option> 27:   <option value=\"2\">2</option> 28:   <option value=\"3\">3</option> 29:   <option value=\"4\">4</option> 30:   <option value=\"5\">5</option> 31:   </select></p> 32:   <p><strong>Text Starting Position:</strong><br /> 33:   X: <input type=\"text\" name=\"x\" size=\"3\" maxlength=\"3\" /> 34:   Y: <input type=\"text\" name=\"y\" size=\"3\" maxlength=\"3\" /></p> 35:   <p><input type=\"submit\" name=\"submit\" value=\"create image\" /></p> 36:   </form> 37:   </body> 38:   </html>"; 39: } else { 40:   //create image 41:   //create the canvas 42:   $myImage = ImageCreate($_POST["w"], $_POST["h"]); 43: 44:   //set up some colors 45:   $background = ImageColorAllocate ($myImage, $_POST["b_r"], 46:       $_POST["b_g"], $_POST["b_b"]); 47:   $text = ImageColorAllocate ($myImage, $_POST["t_r"], 48:       $_POST["t_g"], $_POST["t_b"]); 49: 50:   // write the string at the top left 51:   ImageString($myImage, $_POST["font_size"], $_POST["x"], 52:       $_POST["y"], $_POST["string"], $text); 53: 54:   //output the image to the browser 55:   header ("Content-type: image/png"); 56:   ImagePNG($myImage); 57: 58:   //clean up after yourself 59:   ImageDestroy($myImage); 60: } 61: ?>

Let's get into the script, where lines 238 represent the user input form, and the remaining lines handle the image created per user specifications.

In this basic form, you see that several fields are used to obtain image specifications. On lines 1213 there are fields to define the width and the height of the image we want to draw. Next, we set up fields to obtain the RGB values for a background color (lines 1517) and a text color (lines 1921).

By the Way

You could create drop-down list boxes containing values 0 through 255, for the red, green, and blue values. This would ensure that the user input was within the required range.

Line 23 contains a form field for the input string. This string will be drawn onto the background of the image in the text color specified. Lines 2531 represent a drop-down list for the selection of the font size. There are five sizes, 1 through 5, for the default fixed-width font.

By the Way

You can specify fonts using the imageloadfont() and imagettftext() functions. Learn more at

Finally, lines 33 and 34 allow you to define the text starting position. The upper-left corner of the image area would be X position 0, Y position 0; 10 increments downward would be Y position 10, 10 increments to the right would be X position 10, and so forth.

If we stopped the script here and closed up the if...else statement and PHP block, we would see a form like Figure 14.8 when loaded in our web browser.

Figure 14.8. User input form for image creation.

In only 18 more lines, we can finish this script and generate images with text strings, so take a look at the remainder of Listing 14.7.

The majority of lines 3961 you've already seen before, only this time we use extracted elements from the $_POST superglobal to take the place of hard-coded values. In line 42 we use the width and height values from the form to set up the initial image. Lines 4547 define two colors, $background and $text, using the appropriate RGB values provided by the form.

By the Way

The colors weren't given actual color names in this script because we don't know what the user input would createwe could call the color $red, but if they defined it as 0,255,0 we'd look stupid because that's the RGB value for green! Instead, we simply name our colors after their purpose, not their appearance.

Lines 5152 represent the only new item in this script, the use of the imagestring() function. The six parameters for this function are the image stream ($myImage), the font size ($_POST["font_size"]), the starting X and Y positions ($_POST["x"] and $_POST["y"]), the string to be drawn ($_POST["string"]), and the color in which to draw it ($text). Lines 5556 output the image to the browser, and line 59 destroys and cleans up the image creation process.

If we save this file as imagecreate.php, place it in the document root of the web server, and fill out the form, the output could look something like Figure 14.9. But quite likely your results will differ because there are many variables to play with!

Figure 14.9. Sample output from image creation form.

Try it yourself, using various sizes, colors, and text strings.

Sams Teach Yourself PHP, MySQL And Apache All in One
Sams Teach Yourself PHP, MySQL and Apache All in One (3rd Edition)
ISBN: 0672328739
EAN: 2147483647
Year: 2004
Pages: 327

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: