Necessity is the Mother of Invention: Twitter style Image Cropping tool

This asset provides a functionality same as available in twitter. I used and modified functionalities available on jWindowcrop plugin to give it a look and feel same as in twitter. For that integration has been done with JQuery Dialog and JQuery Slider widgets.

Steps to follow:

Implement File upload code which uploads file and in response it returns the file which can be viewable on browser.

Here I have developed servlet “UploadImage” which uploads file on server and return back javascript code as an output stream.

This below particular code does following tasks:

Opening JQuery Dialog
Setting imagePath in target3 variable needed for jWindowCrop plugin

out.println("<script type=\"text/javascript\">");

out.println("parent.document.getElementById('browsehidden').src='"+imagePath+"';parent.displayImageDialog();parent.document.getElementById('target3').src='"+imagePath+"';");

out.println("</script>");

Once this code executes it displays the uploaded image in plugin.

Modifications Done on Original Plugin : Below screen demonstrates the original plugin view.

By using jQuery slider widget I have handled zoom in-zoom out events for that plugin. And put this plugin in JQuery Dialog control and applied look and feel using CSS and Images. Finally on changing its dimensions clicking on apply will give you co-ordinates that you can use to crop an Image.

Below images describes the comparison.

Twitter : Upload profile picture tool