While others are sun bathing somewhere on the shores of Black Sea I received another interesting task – to  implement cropping for user uploaded profile images. My first idea was to port MooCrop to Mootools 1.2 and apply couple of modifications, but the customer wanted the cropping to be exactly like in Facebook. For those who don’t know it is plain old boring mouse drag.

Instead of generating thumbnail and then cropping it (like in Facebook) I take the original (uploaded) image and resize it with CSS (yes I know it is not the right thing to do but for a quick preview IMO it is ok and we skip one resizing operation). Then I use the Drag Class to create a drag to scroll container (like in Adobe Acrobat) and finally with two hidden input fields I send the coordinates to the server side part which takes care of the resizing and cropping of the image.

Enough mumbojumbo – the cropping example and the pic

FaceBook cropping

Comments

Comment by Morgan on 2008-09-10 05:39:26 +0300

Hi, great script! After having a play with a few browser versions I noticed that in IE (I tested with IE 7) if the image is too long and you drag horizontally then there is a pixel or two movement up and down also. Not a big concern though.

Thanks for sharing your script.

Morgan

Comment by Peter on 2008-09-10 10:12:02 +0300

@Morgan – Probably you can fine tune the calculations to avoid this.

Cheers

Comment by Mitch on 2008-10-12 06:25:51 +0300

How do I download this script, Pete?

Comment by Peter on 2008-10-12 17:23:39 +0300

@Mitch view source of the example. It is all there.

Comment by darwin on 2009-02-06 12:59:47 +0300

hi,how can i set the default left position and top position of that image ?
thanks..

Comment by HT on 2009-02-24 14:37:13 +0300

Hi.

Thanks for a great script!
The only thing I’m missing is a setCoordinates(..) function, which let me set image left and top coordinates other than 0.

Is there a solution to this?

HT

Comment by newbie on 2009-03-18 04:26:32 +0300

Has this croping script in prototype framework?

Comment by Peter on 2009-03-18 12:39:04 +0300

@newbie
No, it uses Mootools Framework.

Comment by Rasmus on 2009-04-13 17:25:43 +0300

How do i make it update the database with the information, when dragging??

Comment by Peter on 2009-04-14 00:23:29 +0300

@Rasmus – You can put two hidden form inputs and fill with the coordinates

Comment by Rasmus on 2009-04-14 15:14:47 +0300

Hey .. thanks Peter.. Great script ..

Just another question. How, when the information is updated do i show a picture with the picture applied, and how when i edit the picture again will it show with the (now) defined data.

Comment by Peter on 2009-04-14 16:10:31 +0300

@Rasmus – You can tweak the styles so it match the stored value

Comment by Nimesh Kumar on 2009-04-15 14:58:52 +0300

Hi, thanks a lot , i use this functionality in my pages and i think its a great tool……………

Cheers

Comment by Rasmus on 2009-04-15 16:23:07 +0300

Okay, great .. Which ones should be tweaked? :) Sorry for all by questions

Comment by Marc on 2009-05-04 08:59:26 +0300

Great script! Exactly what I’ve been looking for! :)

Comment by Harsh on 2009-06-06 13:17:59 +0300

great script as what i was looking for.
but for some reason its not working for me instead of croping and image i get alert message. CAN ANYONE HELP?
CHEERS

Comment by Peter on 2009-06-06 19:46:27 +0300

@Harsh – Put it online and I can check what went wrong

Comment by Yancho on 2009-06-26 18:46:45 +0300

Great work!
Can you add resize and rotate with sliders.
I’m trying, but when I move image and then chage the width – it’s not fit to the cropper…

Comment by Peter on 2009-06-27 22:33:58 +0300

Hi Yancho (мараба дет се вика) you can check this one – http://www.nwhite.net/MooCrop/ it has resize and might be closer to your purposes. I haven’t planned any work on this one.

Comment by Tommy on 2009-08-13 09:39:08 +0300

hello Peter

After I get value Cut from Top/Left .How can I display picture which the Top/Left value ?

Comment by hasan on 2009-10-28 17:29:31 +0300

How do i load it with a predefined left and top positions.

Comment by Peter on 2009-10-29 12:49:01 +0300

@hasan – via CSS

Comment by Pieter on 2009-11-06 18:23:50 +0300

Great script, exactly what I’ve been searching for…thanks!

Does anyone have a fix for the 3 pixel-line that appear at the bottom when panning the image upwards in IE7? I’ve looked through the moo-drag script but my JS is not at the level needed to fix the problem?

I will greatly appreciate it if someone can provide me with a fix!!!

Comment by Pieter on 2009-11-08 07:15:38 +0300

Fixed the 3 pixel-line by create a CssClass “img.cropImage” for my asp:image and setting position: absolute…the line disappeared…

Comment by netfriend on 2010-04-15 20:29:18 +0300

Why can I not drag the image vertically?

Comment by Danny on 2010-08-18 23:34:27 +0300

Has anyone seen a plug-in like this for JQuery?

Comment by HainesFlightsky on 2011-12-29 03:47:08 +0300

Looks like no one has replied in a long time. Was wondering if there were any developments in the JQuery area with this tool. Thanks.

Comment by Chris Annon on 2013-05-20 16:04:42 +0300

Great script, works just like it’s supposed to, UNLESS you try to ad ANY other script to the page. Then it dies. What’s the deal?

I am using it like Facebook does for their Cover Cropping, and I want to be able to change the background color for images that don’t meet my width requirement of 1000px. So I am trying to find a Color Picker, but everyone I use seems to have a conflict with this script and it dies. I am kind of a Noob when it comes to JS, and have never used anything with MooTools framework, always JQuery…

Is there a solution to this issue?

Comment by Anubhav on 2013-08-05 09:30:16 +0300

Great Script Sir.

It is working fine in all the Browsers except IE, what to do so that it can work there also!