Posts Tagged ‘facebook’

Facebook Style Image Cropping (Javascript Preview)

Tuesday, August 26th, 2008

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