Photo Cropper API: How is it achieved?

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)

Click here to visit the demo section of this API.


  • 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  and inspect the DIV named cropdiv. Basically I set the uploaded image into this div through a javascript 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

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.

Creative Commons License

This work is licensed under a
Creative Commons Attribution-Share Alike 2.5 India License.