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

Tags: , ,

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

  1. Morgan Says:

    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. Peter Says:

    @Morgan – Probably you can fine tune the calculations to avoid this.


  3. Mitch Says:

    How do I download this script, Pete?

  4. Peter Says:

    @Mitch view source of the example. It is all there.

  5. darwin Says:

    hi,how can i set the default left position and top position of that image ?

  6. HT Says:


    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?


  7. newbie Says:

    Has this croping script in prototype framework?

  8. Peter Says:

    No, it uses Mootools Framework.

  9. Rasmus Says:

    How do i make it update the database with the information, when dragging??

  10. Peter Says:

    @Rasmus – You can put two hidden form inputs and fill with the coordinates

  11. Rasmus Says:

    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.

  12. Peter Says:

    @Rasmus – You can tweak the styles so it match the stored value

  13. Nimesh Kumar Says:

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


  14. Rasmus Says:

    Okay, great .. Which ones should be tweaked? :) Sorry for all by questions

  15. Marc Says:

    Great script! Exactly what I’ve been looking for! :)

  16. Harsh Says:

    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?

  17. Peter Says:

    @Harsh – Put it online and I can check what went wrong

  18. Yancho Says:

    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…

  19. Peter Says:

    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.

  20. Tommy Says:

    hello Peter

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

  21. hasan Says:

    How do i load it with a predefined left and top positions.

  22. Peter Says:

    @hasan – via CSS

  23. Pieter Says:

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

  24. Pieter Says:

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

  25. netfriend Says:

    Why can I not drag the image vertically?

  26. Danny Says:

    Has anyone seen a plug-in like this for JQuery?

  27. HainesFlightsky Says:

    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.

  28. Chris Annon Says:

    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?

  29. Anubhav Says:

    Great Script Sir.

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