This is a sample application to show how to crop an image within a div container, similar to Facebook.
It is a very simple application that has no styling or design.
The behavior of the application is very simple. We have an image stored in /public, imagen.jpg The first step is to load the image and show it within a div. With jquery-ui we make the picture container draggable within its container.
In this moment we have the visual part of this functionality.
To know how to crop the image we need the position of the top left corner. We get this data checking the drag event. Every time we drag the image we store the X and Y coordinates of the image in two hidden fields. With the top left corner of the image and the width and height of the rectangle we can crop the image easily.
In the controler we just need to load the image and use the crop! method to crop it. I have added some validations so we always fill the rectangle totally. Then we save the new image in a new file and done.