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