JCrop How to crop image by dragging it behing a div (like facebook cover)

jquery image crop jcrop
ashutosh picture ashutosh · Oct 2, 2013 · Viewed 14.6k times · Source

I have used Jcrop extensively but I want to crop the image in much similar way the Facebook uses for cropping its cover image.

So, I want a div to be of some fixed size wherein the background to hold a draggable image of its original size, which the user drag and find the suitable visible region to be cropped.

From what I have learnt, in JCrop, the original image is of fixed size and draggable region moves over it which you want to be cropped.I just want the opposite. The image to be draggable and selection region to be fixed.

Is there a way to do it using JCrop?

EDIT: Since it's been some time I posted the answer, the other answer helps in much better way. Please check that out

Answer

404 picture 404 · Aug 3, 2014

To crop images like in Facebook (dragging within an area) I'd strongly recomend using Guillotine (demo).

It's a very lightweight plugin and allows to crop, zoom and rotate images. It also has touch support and it's responsive (fluid). It's perfect for Facebook like cropping and it's really easy to setup.

Related questions

Jcrop have problems with large size images

TRANSLATED by Google I'm running to achieve an upload form in php and jquery and say that everything is fine now except for one thing that I think is nonsense but still can not figure it out. Let me explain: …

Read More
Using cropper.js before Dropzone.js send image to server

What I want to do here is before Dropzone.js send the dropped image to the server, a modal appears with cropper.js (fengyuanchen script) so the user can crop the image, and when image is cropped, send it with …

Read More
Changing the image source using jQuery

My DOM looks like this: <div id="d1"> <div class="c1"> <a href="#"><img src="img1_on.gif"></a> <a href="#"><img src="img2_on.gif">&…

Read More