|
$$ 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
|
|
|
What you will learn in the This
section??
-
How to
create a simple file upload form.
-
How to
let users upload images to your site.
-
How to
use gd library.
-
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:
-
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.
-
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( ).
-
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
|
|
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.
