Facebook Style Image Cropping (Javascript Preview)
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
Tags: facebook, image cropping, JavaScript
However I tend to disable it for small blogs like this one. If you would like to help me pay for my webhosting please allow your Adblocking software to show adverts from this site. Thanks!
September 10th, 2008 at 5:39 am
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
September 10th, 2008 at 10:12 am
@Morgan – Probably you can fine tune the calculations to avoid this.
Cheers
October 12th, 2008 at 6:25 am
How do I download this script, Pete?
October 12th, 2008 at 5:23 pm
@Mitch view source of the example. It is all there.
February 6th, 2009 at 12:59 pm
hi,how can i set the default left position and top position of that image ?
thanks..
February 24th, 2009 at 2:37 pm
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
March 18th, 2009 at 4:26 am
Has this croping script in prototype framework?
March 18th, 2009 at 12:39 pm
@newbie
No, it uses Mootools Framework.
April 13th, 2009 at 5:25 pm
How do i make it update the database with the information, when dragging??
April 14th, 2009 at 12:23 am
@Rasmus – You can put two hidden form inputs and fill with the coordinates
April 14th, 2009 at 3:14 pm
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.
April 14th, 2009 at 4:10 pm
@Rasmus – You can tweak the styles so it match the stored value
April 15th, 2009 at 2:58 pm
Hi, thanks a lot , i use this functionality in my pages and i think its a great tool……………
Cheers
April 15th, 2009 at 4:23 pm
Okay, great .. Which ones should be tweaked?
Sorry for all by questions
May 4th, 2009 at 8:59 am
Great script! Exactly what I’ve been looking for!
June 6th, 2009 at 1:17 pm
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
June 6th, 2009 at 7:46 pm
@Harsh – Put it online and I can check what went wrong
June 26th, 2009 at 6:46 pm
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…
June 27th, 2009 at 10:33 pm
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.