JCrop How to crop an image by dragging it onto a div (e.g. facebook cover)

Question

I used Jcrop , but I want to crop the image in the same way that it uses Facebook to crop its cover.

So, I want the div to have some fixed size, in which the background held the draggable image of its original size, which the user drags and finds a suitable visible area to be cropped.

From what I found out, in JCrop, the original image has a fixed size, and the moved area moves along it that you want to crop. I just need the opposite. The image to be dragged and the selection area will be fixed.

Is there a way to do this with JCrop?

Answer 1

I searched for this for a while, While I got another great plugin - JWindowCrop

You can also get the plugin from the repository .

Favorably, the plugin is quite simple, and you can easily change it to suit your needs.

Here's how I did it to fit the cropping area of ​​the 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 change the inner area if you are not satisfied with the plugin.

NOTE Since the facebook cover is only 851px wide, the uploaded image and the crop split should have the same width ie 851px.

I prepared a demo here

EDIT: Just in case, if you notice the text “Drag and Drop to Move” in the cropping area (upper left side), when you drag the image inside the cover, you can specify your own text by changing this plugin line:

  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 manage to add a parameter to the plugin to do this.

Answer 2

To crop images like on Facebook (drag and drop within the area), I would highly recommend using Guillotine ( demo ).

This is a very lightweight plugin and allows you to crop, scale and rotate images. It also has sensory support and is responsive (fluid). It's perfect for Facebook, like cropping, and it's very easy to set up.

Answer 3

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