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

FaceBook cropping

29 Replies to “Facebook Style Image Cropping (Javascript Preview)”

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


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


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

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


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

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

  7. hello Peter

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

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

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

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

  11. Great Script Sir.

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

Comments are closed.