Templates of the week

Download This

Download This

Download This

 

 

   

$$All What you Must Know A bout images upload and edit using PHP

Top Tutorial Create a realistic stony text using Photoshop by the easiest way. you will get fine  end.

What you will learn in the This section?? ❑ Enabling your PHP setup to include the GD library ❑ Allowing your users to upload their own images ❑ Retrieving information about an image, such as size or file type ❑ Creating a new image ❑ Copying an image or a portion of an image ❑ Creating thumbnails (smaller versions of images) ❑ Creating black-and-white versions of images ❑ Adding watermarks and captions to images     Working with the GD Library GD is written in C++ and allows for the manipulation of certain image types. Because PHP can’t automatically process images with built-in functions, you need to make sure you have the GD library enabled. Fortunately, a bundled version comes with all recent versions of PHP. If you don’t have the bundled version, though, you can find it externally at http://www.boutell.com/gd/. However, we recommend that you use the bundled version as opposed to the external version available for downloading, if possible.

Allowing Users to Upload Images Suppose you wanted to add a little spice to your movie review site and thought it would be a good idea to let users upload pictures of themselves dressed as their favorite movie actors in their favorite roles. In the rest of this chapter, you will create this “look-alike” photo gallery. No man is an island, and the same can be said for PHP. To let other people submit their own pictures to your little old site, you will need to enlist the help of HTML. You will also need some MySQL to keep track of all these images. There is some debate about whether or not actual images can be efficiently stored in a database using the blob MySQL column type. My personal preference is not to store the actual image, but to store only information about the image, and if needed, a link to the image. The images themselves are then stored in a regular old directory of your choosing. That being said, create a table in your movie review database that will store the links to the images your users upload.

Converting Image File Types You may have noticed something interesting about the way you referenced your image when showing it back to the user. Look at this line: <img src=”images/<?php echo $lastpicid . $ext; ?>” align=”left”> You used the two variables $lastpicid and $ext to return your image’s filename. (You could have also used the variable $newfilename and left off the image path, but bear with us, we’re going to make a point here.) Did you notice that this information isn’t stored anywhere in your image table? How will you access this picture again when the information in the variables has expired? You can access the first portion of the filename, because it’s the same as the image_id. How do you know the file extension, though, if it’s different for each image? You can do one of three things to remedy this: 1. Add a field to your image table to allow you to store the full image filename. 2. Add a field to your image table to allow you to store the extension. 3. Convert all your incoming images to the same file type so the extension will always be the same. We’re going for door number 3, Monty. You’ll see why in the next few sections, but for now, alter your check_image.php file accordingly. You won’t be “converting” the images per se, but you will be creating duplicates in the .jpg file type, and saving those. You can choose GIF, JPG, or PNG; this example uses JPG files because we are dealing mostly with photos and won’t need to worry about things like transparency. To convert your file to another type, you have to do four (optionally five) steps: 1. Create a new GD-friendly image from your original image to act as your temporary source image. 2. Create a new GD-friendly blank image to act as your temporary destination image. 3. Copy your new source image to your new destination image. 4. Save or output your altered destination image. 5. (Optional, but recommended) Destroy your temporary source and destination images. PHP has file type–specific functions for steps 1 and 4 (for example, imagecreatefromgif, image createfromjpg, and so on), so it’s important to know the file type you’re working with. By keeping the file types consistent on your site, you can manipulate all the images using the same set of functions. Of course it is possible to maintain and work with multiple image types, but remember you’re going for simplicity here.

How It Works Let’s look at the main section that you added to your program, and let’s take it line by line. First, we will deal with the JPG files because they are already in the format you want. if ($type == 2) { rename($ImageName, $newfilename); Here you are saying if the file is a JPG file, you just want to rename it to match your image ID, plus the “.jpg” extension. Piece of cake, right? Otherwise, if the file is a GIF or a PNG, you want to use the appropriate function to deal with them. You first check to see if the file is a GIF file: } else { if ($type == 1) { $image_old = imagecreatefromgif($ImageName); imagecreatefromgif() is the appropriate function because your source image is in a GIF format. Likewise if the image was a PNG image, you would use the imagecreatefrompng function: } elseif ($type == 3) { $image_old = imagecreatefrompng($ImageName); } Now that you have your GD-friendly source image, you need to go step 2 of the conversion list presented earlier and create a GD-friendly temporary destination image. You do this in the next line: $image_jpg = imagecreatetruecolor($width, $height); You use the imagecreatetruecolor() function to maintain color quality in your image, and because you want your destination image to be identical in size to the source image, you use the $width and $height variables that were obtained from the getimagesize function earlier in the script. Now you can proceed to step 3 of the conversion list—copy the temporary source image into the temporary destination image. You do this in the next line: imagecopyresampled($image_jpg, $image_old, 0, 0, 0, 0, $width, $height, $width, $height); You use imagecopyresampled to maintain the quality of your image. As you can see, you denote the destination image, the source image, starting coordinates (x, y) of both images, and the width and height of each image. If you only wanted to copy a portion of the source image into your destination image, you could do this through the coordinates and the width/height variables. Next, you have to save your image somewhere to make it permanent, as you can see in the next line: imagejpeg($image_jpg, $newfilename); This is where the actual conversion takes place. Before this line, your temporary images were “generic.” You decide to make the destination file a JPG with the imagejpeg function. You could also have used imagepng or imagegif, but again, you want to work with JPGs because the majority of your uploaded files will be photos. In this function, you name the new temporary source file (your previous destination file) and the new permanent destination file. It’s important to note that you needed to include the path name in the variable $newfilename, which you did above   Black and White Now that you’ve got a directory full of images, what comes next? To play with them of course! What if you wanted to allow your users to make their images black and white? Let’s add that option to your showimage page, so your users can choose whether or not they want to see their image in grayscale. You will be using the imagefilter() function, which can do many things, only one of which is to convert the image to grayscale. This function can also make a negative of your image, alter the brightness or contrast of your image, emboss, blur, smooth, detect edges within and colorize your image. Whew! It’s a pretty powerful function, and one you want to remember. (You can find complete syntax for using this function and the filter types at http://us2.php.net/manual/en/function.imagefilter.php.) You can use this function to clean up or create funky versions of uploaded photos, or better yet, transfer that power over to your users! Adding Captions A special group of functions allow you to add captions (or a copyright notice or other text) to your images. PHP/GD is relatively advanced in allowing you to control the size and type of font that is used, even allowing you to load your own font on demand. While you’re absolutely encouraged to experiment with all the cool font functions available to you, we will try and keep it simple here to get you started. That being said, let’s get to it!   How It Works First, you add the “embed caption” option to your form in showimage.php. This is a no-brainer, right? Good. Then you add the imagettftext() function to your modifyimage.php file like this: //**INSERT THE FOLLOWING LINES: if ($text == ‘on’) { imagettftext($image, 12, 0, 20, 20, 0, “arial.ttf”, $image_caption); } //**END OF INSERT The imagettftext() function is only one of the many text/string functions available in PHP/GD. The function is made up of eight values, in this order: 1. The image where the text is to go ($image in this example) 2. The font size of the text (12 in this example) The rotation of the text (0 in this example) 4. The x coordinate for the starting position of the text, with 0 being the leftmost boundary of the image (20 in this example) 5. The y coordinate for the starting position of the text, with 0 being the upper boundary of the image (20 in this example) 6. The color of the text using the color index (0, or black, in this example) 7. The name of the font file you want to reference, to be located automatically in the default font directory (arial.ttf in this example) 8. The string of text to be shown (contents of the $image_caption variable in this example) Adding Watermarks and Merging Images Because you are showing these images on the Movie Review Site, make your logo show up lightly behind each image that is hosted by you, as a sort of watermark. You can do this with your own logo to protect any copyrighted images, as we did easily enough with the text. In this section, you will actually be merging two images (your source image and your logo image) to create the desired effect. Let’s make the changes. How It Works You have simply added another option for your users; and you did it using the imagecopymerge() function in modifyimage.php. Note that before you could merge the two images, you had to make the second image “GD friendly” by creating a duplicate copy. Because your image was a GIF image, you used the imagecreatefromgif function. Look at this line from that script: imagecopymerge($image, $image2, 0,0,0, 0, $width, $height, 15); The parameters for the imagecopymerge function are as follows, in this order: 1. The name of the destination image ($image in this example, since the $image file is the one you are making all the changes to, and the one that will be shown at the end of your script). The name of the second, or “source” image ($image2 in this example) 3. The x coordinate of the destination image (0 in this example, representing the leftmost boundary) 4. The y coordinate of the destination image (0 in this example, representing the upper boundary) 5. The x coordinate of the second image (0 in this example) 6. The y coordinate of the second image (0 in this example) 7. The width of the portion of the second image to be merged ($width in this example, representing as much of the second image that will fit on the destination image) 8. The height of the portion of the second image to be merged ($height in this example, representing as much of the second image that will fit on the destination image) 9. The percent of transparency of the two images to be merged, with 100 being equal to the second image completely overwriting the first (15 in this example). Let’s talk briefly about numbers seven and eight. Because imagecopymerge() can merge only a portion of one image with another, you have to specify how much of the image you want merged. The CBA logo is huge, and bigger than the user’s photo. You only wanted to merge the portion as big as your user’s photo, which is why you used $width and $height. If your logo is tiny, you would specify its width and height, assuming you want to merge the whole thing with your first image. We hope you’re still with us because there is one more thing we would like to do. Creating Thumbnails Of course, showing your users’ images at full size is fine if they want to see them up close. However, it’s not too conducive for showing a photo gallery or list of many photos on a page. This section discusses discuss how you can automatically create a thumbnail of each of your uploaded files that will be used for just that purpose—a photo gallery of all your photos. Now upload some images using your upload_image.htm page. When you have a few, go to gallery.php in your browser and see what you have. Your screen should look something like Figure 7-8. Ok, so it’s not pretty, and mostly utilitarian in appearance. The important thing is that it works! You can add the bells and whistles later; we just want to make sure you can make a thumbnail. How It Works The actual thumbnail itself is created in your check_image.php file, so let’s take a look at that first. You added the following lines that complete that task for you: //**INSERT THESE LINES $newthumbname = $ImageThumb . $lastpicid . “.jpg”; //get the dimensions for the thumbnail $thumb_width = $width * 0.10; $thumb_height = $height * 0.10; //create the thumbnail $largeimage = imagecreatefromjpeg($newfilename); $thumb = imagecreatetruecolor($thumb_width, $thumb_height); imagecopyresampled($thumb, $largeimage, 0, 0, 0, 0, $thumb_width, $thumb_height, $width, $height); You then create the thumbnail using the 5-step process as before: 1. Create a GD-friendly image from your source. 2. Create a blank GD-friendly image, with your smaller dimensions. 3. Copy the source image into the smaller blank image. 4. Save the newly created small image in its proper directory with its proper name. 5. Destroy the temporary images. Just like before, easy as pie, right? You may notice a broken image in the screenshot above; do you know why it is broken? If you said “because we uploaded that photo before we implemented the thumbnail process,” then you get 100 points and you get to take a break. Not a long one, mind you, but a break nonetheless. Summary This chapter covered a lot, and has only scratched the surface on image manipulation using the PHP/GD combination. Hopefully by now, you can upload images, resize them, change their coloring, create an automatic thumbnail, create new images, and merge two images together. In this chapter, you used a form to get the image from the user. What if the user tried to upload a file that wasn’t an image at all, either by mistake or out of malicious intent? In this chapter, such a file would have been caught by the code that checked for the image type. Not all forms are so straightforward to check, though. In the next chapter, you’ll learn about how to check that users enter information in your form in the proper format, and how to give them appropriate feedback when they don’t.

The End                  Dr Smith urlearn@gmail.com info@urlearn.com

 

 

 

 

 

Home | Site map | Autoplay | Photoshop | Dreamweaver | Swishmax | Web design | Contact                       Rights reserved