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

Question

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

Solution 1

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.

Solution 2

I have been searching this for a while, While I got another great plugin- JWindowCrop

Also you can get plugin from the repository.

It is benefitial for the fact that the plugin is quite simple and you can easily modify it as per your needs.

Here is how I did it to match the crop area of facebook cover:

HTML:

<img id="target" class="crop" alt="" src="images/sample-cover.jpg" />

JavaScript:

$('.crop').jWindowCrop({
                targetWidth: 851, //Width of facebook cover division
                targetHeight: 315, //Height of cover division
                loadingText: 'Your Cover is uploading....',
                onChange: function(result) {
                    console.log("separation from left- "+result.cropX);
                    console.log("separation from top- "+result.cropY);
                    console.log("width- "+result.cropW);
                    console.log("Height- "+result.cropH);
                }
            });

You can modify the internal region if you are not satisfies with the plugin.

NOTE: Since the facebook cover is of width 851px only, the uploaded image and the cropper division must be of same width i.e 851px.

I have prepared a DEMO here

EDIT: Just in case if you noticed the text "Drag to reposition" in the crop area(top-left side) while you drag the image inside cover, you can mention you own text by changing this line of plugin:

 Line:34-   base.$frame.append('<div class="jwc_controls" style="position:relative;display:'+(base.options.showControlsOnStart ? 'block' : 'none')+';"><span class="dragger">Drag to reposition</span></div>');

I could not got time to add an option in the plugin to do so.

Solution 3

upload image like facebook cover image use this plugin facebook-style-cover-image-reposition

Comments

[Roberto Pezzali]

This plugin is great! Have you found a way to use it with a form? I need to crop an image before upload and I want also to keep the original version. I'm trying to modify bootstrap file-uploader to show two preview windows, one of them with jwindowscrop.

[ashutosh]

can you show me a fiddle or example of how are you using? Maybe I can then suggest some change. From what you told, I suggest you to use jquery on method to trigger the jwindowcrop function to enable cropping in the preview area.

[Roberto Pezzali]

DEMO PAGE you can see my demo page. I don't know how to call my jWindowCrop function on "upload" event. If I launch it using the console it works!

[Muhammad Tahir]

Thanks for suggestion.. Great plugin.