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.

enter image description here

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

you mean druging to cut specific part of image that would be used as your thumbnail — COLD TOLD, Jul 31 '12 at 04:10
need an example to give a better answer, possibly look at imageresizing.net they have some good stuff there for image manipulation — Daniel Powell, Jul 31 '12 at 04:11
Please check my answer too, I guess it's exactly what you are looking for — Ergec, Dec 28 '12 at 11:55

Ergec · Answer 1 · 2013-12-22T22:59:31.367

6

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)

edited Dec 22 '13 at 22:59

answered Dec 28 '12 at 11:53

Ergec

11,608
7
52
62

Hello Ergec, you did this ages ago but it's exactly what I need so thanks. One quick question, it only seems tomove the image along the y-axis (vertically), how do I get it to work horizontally (i.e. for an image that is wider than the #mask)? I have been playing with the fiddle by altering the .mask width but that doesn't seem to work. Thanks. – Obi Dec 22 '13 at 10:43
1

Thanks @ergec, great stuff. I did the unthinkable and combined both to allow dragging on both axis together see here http://jsfiddle.net/ObiOne86/QQMq3/ Your thoughts...? maybe you can include it in your answer as well. Thanks again. – Obi Dec 23 '13 at 05:56
@ObiOnuorah still glitchy but remember xy-axis is way more tricky. Since you don't fit either width or height, you have to let user fit whole image and you can do this only by implementing resize/crop functionality, coordinates, crop width/height like these http://www.pixelzdesign.com/blog_view.php?id=59. The one I did is the simplest way ;) – Ergec Dec 23 '13 at 06:27

score 4 · Accepted Answer · edited May 23 '17 at 12:06

4

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.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 31 '12 at 04:25

Jarrod

9,349
5
58
73

It is not actually the cropping, it is moving – Sarawut Positwinyu Jul 31 '12 at 04:26

score 3 · Answer 3 · answered May 08 '14 at 00:22

3

This is exactly what you need: http://github.com/matiasgagliano/guillotine

Plus it supports zoom, rotation, touch devises and it's fully responsive.

Demo: http://matiasgagliano.github.io/guillotine

answered May 08 '14 at 00:22

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

3 Answers3