ImgAreaSelect 0.4

Here’s a new release of my imgAreaSelect jQuery plugin. I’ve fixed a few bugs and introduced two new features that have been asked for: the ability to enable/disable the plugin on demand, and to set the color and opacity of the unselected area.

There were a few bugs in the 0.4 code (thanks to vivo for catching them quickly), so I’ve made a quick update and released version 0.4.1.

Edit #2:
This is definitely not my lucky day. It seems my quick update was in fact too quick, as the updated version turned out to be broken in IE. I fixed it (and TESTED this time) and made yet another release, so it’s version 0.4.2 now.

16 Responses to “ImgAreaSelect 0.4”

  1. vivo says:


    Thanks for the quality plugin!

    I found a bug in the latest version. If image offset is changed after imgAreaSelect initialized first time then outer div displayed with the wrong offset.

    <div id=”#debug”>test test test</div>
    <img id=”#photo” style=”float: left;”/>

    $(“#photo”).imgAreaSelect({hide: true, disable: true, …});
    $(“#photo”).imgAreaSelect({show: true, enable: true, …});

    I hope understandably explained this bug. Contact me if need additional info. Speak English poorly. :)

  2. vivo says:

    The next bug:

    $(“#photo”).imgAreaSelect({hide: true});
    outer div is not hiding…

  3. Michal Wojciechowski says:

    Thanks for your feedback. I guess I didn’t test it thoroughly enough this time and those nasty bugs went unnoticed.

    An updated version is on its way.

  4. vivo says:

    Ok. Thank you :)

  5. etienne says:

    Nice work.
    However, this plugin doesn’t work with IE7 or did I miss something ?

  6. Hi,
    Thank you for the plugin. The plugin does not work in thickbox. I am creating an iframe inside my document to show the external page. I have initialized the script to show a selection by default. Once the external page is loaded, it shows the selection, but once i start dragging, it first moves to the top left edge and then disappears on another drag. I guess the problem is with the event object that you are passing, as it takes the width x coord etc of the window and not page. Can we do it for the page or can you help me how can i do it.

  7. semper says:

    Awesome work, thanks a lot.
    But: when i apply css file to the page, the selection is not seen. The script works, but neither selectionColor, nor borderColor works.
    Can you suggest why this happens?

    Appreciate your feedback

  8. Parvez Hakim says:

    It works for me; please make sure you are using proper API and no mismatch in css

  9. rohan says:

    Could you please tell me if there is any way i can set the default selection at the center of image and keep that selection box visible by default, so the user realises that it is a cropable image?

  10. rohan says:

    oops, my bad
    i just checked out the examples section and it solved my problem with (x1: 120, y1: 90, x2: 280, y2: 210)
    This is awesome!!!

  11. Ryan says:

    Hi, the demo works ok for me in IE7 and FF with one exception. When I resize the browser window, the selection area moves away from the image and continues to cause issues until I refresh the page.

  12. Michal Wojciechowski says:

    This will be fixed in version 0.5, which will be released tomorrow :-)

  13. josh says:

    Great app, however I can’t get the cropper (imgAreaSelect) to show up in an iframe to mimick an AJAX callback. I’ve been playing with “$(window).load(function ()” but can’t get it to work. As soon as I take it out of the iframe it works great. Any help would be greatly appreciated. Nicely done

  14. Michal Wojciechowski says:

    @Josh: I’d have to take a look at your code to see if I can help. Feel free to contact me by e-mail.

  15. Nick ar Gall says:

    I have a question. I use your (great!) plugin in an ajax-loading Div in order to create Avatars for my forum.
    1- I upload a picture
    2- Div reloaded by Ajax, showing the uploaded picture, I call ImgAreaSelect, no problem
    3- I crop & save, all is Ok.

    Anyway, i’d like to know if I can reinitialize the selection automatically when calling your plugin; for instance, if I start a selection, then close the div, then re-open it in order to make another selection (by reloading the Div using Ajax), the first selection remains.

    Any idea ?

  16. Michal Wojciechowski says:

    @Nick: Have you tried using the .cancelSelection() API method? See

Leave a Reply