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
 
 
   
$$ Image Editor Script
This Tutorial will show you how to write a PHP code that ask the user to select one from his images to edit it and then upload the selected image and ask him again to choose one from ready frames to apply it to the uploaded image and then apply the selected frame to his photo without making any changes in the size of his original image. This script depends mainly on a mathematical relation between the frame size and its border .Don't be angry if you will not understand this relation because I spent 10 hours to discover this relations !! .
IT is IMPORTANT TO try the script here
OR Download It
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??
  1. How to create a simple file upload form.
  2. How to let users upload images to your site.
  3. How to use gd library.
  4. How to edit photos using gd library


 
Firstly You should view the script.
CLICK HERE to download the script.
OR Click here To See It.


 
STEP:1 Overview
We must create the uploading form that will ask the user to select the image he want to edit , then we should collect some information about uploaded image like its type, size, and whether it is an image or not.
if the image was uploaded successfully we will ask the user to choose one from our ready frames to apply it to his image. then we will check the selected frame and get its information to prepare it to be convenient to the user image BECAUSE we will not resize the user image or make any changes in it. BUT instead of resizing the user image we will resize the selected frame to fit the image.
But any frame have a border So we must find a relationship between the frame and its border why??.
BECAUSE Our  frame is an image that have a border and empty area .And we want to put the user image in the empty  area of the frame So that we want to change the size of the selected frame to be equal to the size of the user image plus the size of the border, Consequently the border will fit the user image.
Unfortunately you will not find many frames have the same size except you are a perfect designer and can design delicious frames have  the same size.
So that I try to find relationship between the frame border and the frame size and I found it successfully.
With this relation all what we will do is that we will feed the script with the width of any frame border and then it will make the mathematical process then resize the frame and then put the user image on the frame perfectly.
 


STEP 2 : Create the form:
 
<form action="test.php" enctype="multipart/form-data"
method="post">
<p>Select a file:
<input type="file" name="user_file" size="50">
<input type="submit" name="submit" value="Upload Now" />
</p>
</form>
 


 
STEP 3:
Create a new file and name it upload.php and then write the following code
 
<?
$name=$_FILES['user_file']['name'];
$time=time( );
$userimage="images/".$name;
$usertype=$_FILES['user_file']['type'];

      if(ereg("jpeg",$usertype))
      $userimage="images/".$time.".jpg";

if (ereg("jpeg",$usertype))
{
$move=move_uploaded_file($_FILES['user_file']['tmp_name'],$userimage);
 
/////// you will add the frame information and //////links here. Don't forget
 
}
 
else
{
echo "we dont support this type";
}
?>

Note: if you don't understand that script, please check this link



 
 
STEP 4:  Frames information.
after the image uploaded successfully we must print our frames album to the user and ask him to choose one of them to apply it.
the link of the selected frame will transmit some information about  the selected frame
The most important information is the border size of the frame .and its location
besides, the frame link will transmit the user image location and type.
 
This is the the first frame:
 
echo "<a href='frame.php?border=120
&selected=frames/33.jpg
&userimage=$userimage
&type=$usertype'>
<img src='frames/33.jpg' width='300'></img></a>";

 

Note that the border of this frame is the sum of the left line (60PX) and the right line (60PX) and you can know that by using any of image editor programs such as Photoshop;

 

STEP 4:    Using (GD) Functions
After the image was uploaded and the user selected the frame we  now want to retrieve the information of the selected frame from the link
 
$selected=$_GET['selected'];
$border=$_GET['border'];
$userimage=$_GET['userimage'];
$usertype=$_GET['type'];
 
After we gathered the information we need to use if statement to ensure that the image is jpg (You can add other formats)
To do that we will search for the string "jpeg" in the $usertype variable ..To Know more please check this link
 
You must consider the following gd functions before proceeding to  the next step:
 
  1. getimagesize($imagepath);  We use this function to know the size and the type of any image . this function return an array containing 0=>width   1=> height etc.
  2. imagecreatefromjpeg($anyimage); it recreate an image OR it create a new image from exist image but the exist image must be in a jpg format .If you want to recreate an image from gif image you must use imagecreatfromgif( ).
  3. Yo will use imagecreatetruecolor($width, $hieght) 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 you will obtain from the getimagesize function.
 
  • imagecopymerge($image, $image2, 0,0,0,0, $width, $height, Alpha);  Is used for merging two images .                                                                          The name of the destination image ($image in this example, 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).                                               1. The name of the second, or “source” image ($image2 in this example)
    2. The x coordinate of the destination image (0) in this example, representing the leftmost boundary but NOTE that in our script we don't need to start merging from the upper most part but we want to start from the point represents the end of the left boundary of the frame.
    3. The y coordinate of the destination image (0 in this example, representing the upper boundary)
    4. The x coordinate of the second image (0 in this example)
    5. The y coordinate of the second image (0 in this example)
    6. 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) .
    7. 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)
    8. The percent of transparency of the two images to be merged, with 100 being equal to the second
    image completely overwriting the first
    . So we will use 100 to ensure that there is no changes will be done  in the user image.
We use imagejpeg( ) to output the image in a jpg form if you want to output it in a gif form use imagegif( ) the two functions receive two parameter the first is the image that u want to output , the second is the location you want to output to.
 
The code will be:
 
 
if (ereg("jpeg", $usertype))
{
 
//get the user image information
$info=getimagesize($userimage);
$width=$info[0];
$height=$info[1];
 
//get the selected frame information.
$frameinfo=getimagesize($selected);
$framewidth=$frameinfo[0];
$frameheight=$frameinfo[1];

//the mathematical relation between border size //and frame width//
$percentwidth=$border/$framewidth;
$percentwidth+=$percentwidth/3.5;

// the mathematical relation between border size // and frame height
$percentheight=$border/$frameheight;
$percentheight+=$percentheight/4;


//the width of the frame that must be
//to fit the user image

$width2=$width+($width*$percentwidth);

//the height of the frame that must be
//to fit the user image

$height2=$height+($height*$percentheight);

$src=imagecreatefromjpeg($selected);
$dist=imagecreatetruecolor($width2, $height2);
imagecopyresize($dist,$src,0,0,0,0,$width2, $height2,$framewidth,$frameheight);

$usersrc=imagecreatefromjpe($userimage);

// we divide by 2 because the frame consists from
//2 boundaries (or 2 border)

$x=($width*$percentwidth)/2;
$y=($height*$percentheight)/2;

imagecopymerge($dist,$usersrc,$x,$y,0,0,$width, $height,100);

imagejpeg($dist,$userimage);
 
echo "<h2>congratulation::</h2> Your image was edited rt click and choose save Picture as";
}
 


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


 

 

 

 

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