Drag the image to adjust position like in facebook thumbnail profile picture

Question

In facebook, thumbnail picture will leave out some part of the full picture and we can move that so we can fit the thumbnail picture to fit the preferred position, how to do this using the web technology.

In the example, we can drag the image to move the position of thumbnail.

Answer 1

I've been looking for an exact same kind of plugin, couldn't find one, so I wrote one :). Check it out. It's very basic and not many capabilities but still usefull. Use it well, spread it, credit me too ;)

.

Edit: 22 Dec 2013

I noticed that the version using percentages was not working as expected. Link is updated now.

I aslo added an X-Axis version

JSFiddle (Y-Axis)

JSFiddle (X-Axis)

Answer 2

You could try something like this jquery plugin. It's not identical to Facebook but provides controlled crop functionality.

Otherwise, the question has been answered here: Is there a jQuery image cropping plugin similar to Facebook's image crop?

EDIT: Try this one: imgareaselect.