Photo Cropper was something which was introduced or I must say became popular after various social networking sites started
applying it. This allows users to choose a section from a photo which he wants to upload and show to the world around.
I initially tried to investigate how Orkut do this for their users. Further I took a look at API's provided by YUI for the same purpose.
After investigating a few other sources of photo cropper I finally decided to build a photo cropper with an approach used by orkut.
I will further explain the algorithm used in more details later, but before that let us have a look at what I have been able to come up with.
Currently configured only for FireFox Mozilla and Flock (Not IE)
The upload form is a clone of gmail type attachment, where as soon as you select a file on your system. The upload
starts automatically. I have explained and provided open source codes for the same one of my previous posts. Click
here to read more on how to achieve this. Gmail Type Attachment Clone
Hence as a user selects a file for upload, it is submitted for upload into an iframe. In the iframe I have a file called
ajax.php, whose one of the functionality is to save the selected file on the server.
After the upload is complete I do the following processes.
Hides the upload box.
Using iframe, open the uploaded file into a DIV on the parent page. See the source of the page to know more
function which is invoked from the iframe.
After you have opened up the uploaded image, main challenge is how to get the dashed rectangular selection region
working. This dashed selection region is the one which users will use to select the section of image which they
want to actually show up after upload.
For this purpose I have used a method similar to Orkut. To start with I create a dashed DIV of width and height
half of the original uploaded image. Also I place this Selection DIV at top left corner and sync it up with the
background original image.
Biggest thing which I wondered before making this application was, as user moves the selection region how to
ensure that he gets the corresponding section of the image inside the selection region. For this Orkut plays a big
trick. They use another image on top of the original underlying image (which is transparent). This second image
is knows as proxy image. Now as user shifts the selection DIV x pixel to the right and y pixel to the bottom,
I simply move this proxy image x pixel left and y pixel top. Hence fooling the user around. User never gets to know
if their were two images involved in the process.
Once you are done with selecting the portion of choice. I simply sends the top,left position of the selection div and
new height and width of the selection div to the server using ajax. Ajax.php again handles this call which takes
the parameters and crop the original image accordingly.
Finally once the we have our cropped image, we display the same to the user.
Another interesting thing which you can do is, allow user to tag the photo after he has cropped the image. I have
provided an open source API for tagging photo in one of my previous posts here. Photo Tagging API
Feel free to ask questions and comment on this demo on my blog here.
As promised before all this will officially be made open source with the API package i am currently working upon. Meanwhile
if you really need this currently for your website or blog, feel free to contact me for the same.
If you liked this post kindly digg the same and thanks for shouting it out to your friends.
This work is licensed under a
Creative Commons Attribution-Share Alike 2.5 India License.