Corner Of The Genius
 
Sas Jacobs is an Australian web developer specialising in web applications  training and Develop ment. She interested in using Flash with dynamic content and She have presented at a numerous International conferences relating to applications development,  XML and  scripting components. She edited the book (Flash MX 2004 Accelerated) as well as books on adobe  Photoshop and  Illustrator. She have a nice flash business web site at http://www .aip.net.au and a personal web site at http://www.sasjacobs.com
Mark Galer is  a seniorr  lecturer in Digital Imaging i photography at the Royal Melbourne Institute of University on the BA Photography program ,, and has published six titles for the International publisher (Focal Press) - -  ranging from location photography through to Photoshop skills and . Digital Imaging . He has a good commercial background in editoria; photography and is currently  contributor to magazines in the  Australia USA, and the UK. He is an Adobe beta tester for Photoshop and Photoshop Elements, he is  considered as one of the leading lecturer in Photoshop training and has been appointed as an Ambassador for Photoshop training in Australia.

 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
UR Learn Tutorials
News
Templates of the week
 
 
   
$$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