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
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!