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. Let's get into the script, where lines 239 represent the user input form, and the remaining lines handle the image created per user specifications. Listing 14.7. Creating an Image from User Input 1: <? 2: if ($_POST[op] != "do") { 3: //show form 4: echo "<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> 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> 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> 22: <P><strong>Text String:</strong><br> 23: <input type=\"text\" name=\"string\" size=35> 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> 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> 35: <input type=\"hidden\" name=\"op\" value=\"do\"> 36: <P><input type=\"submit\" name=\"submit\" value=\"create image\"> 37: </FORM> 38: </BODY> 39: </HTML>"; 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 three 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 http://www.php.net/image. Finally, lines 33 and 34 allow you to define the text starting position. The upper left corner 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. Listing 14.7. Creating an Image from User Input (continued)[View full width] 40: } else { 41: //create image 42: //create the canvas 43: $myImage = ImageCreate($_POST[w], $_POST[h]); 44: 45: //set up some colors 46: $background = ImageColorAllocate ($myImage, $_POST[b_r], $_POST[b_g], $_POST[b_b]); 47: $text = ImageColorAllocate ($myImage, $_POST[t_r], $_POST[t_g], $_POST[t_b]); 48: // write the string at the top left 49: ImageString($myImage, "$_POST[font_size]", "$_POST[x]", "$_POST[y]", The majority of lines 4058 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 43 we use the width and height values from the form, to set up the initial image. Lines 46 and 57 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. Line 49 represents 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 5253 output the image to the browser and line 56 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 a lot of variables to play with! Figure 14.9. Sample output from image creation form. Try it yourself, using various sizes, colors, and text strings. |
"$_POST[string]", $text); 50: 51: //output the image to the browser 52: header ("Content-type: image/png"); 53: ImagePNG($myImage); 54: 55: //clean up after yourself 56: ImageDestroy($myImage); 57: } 58: ?> 
EAN: 2147483647
Pages: 333