ImgAreaSelect 0.9

I finally found enough time to finish developing the new version of imgAreaSelect, and I’m happy to announce it’s available for download.

This release brings a few major changes and new features — here’s a summary:

  • Styling the plugin is now done with CSS (the old styling options are still supported)
  • A new option has been added to show/hide the plugin with a fade effect
  • A new option has been added to get an instance of the plugin’s object
  • Some of the plugin’s methods have been made public and can be called through the instance
  • A new callback function has been introduced (onInit)

Implementing and testing the new features took me about one third of the total time I worked on this version, I spent the rest cleaning up and refactoring the code. As a result, although the new version has many new features, it’s actually a bit smaller that the previous release (0.8). The packed JavaScript file (included in the distribution package) is less than 8KB in size.

The plugin’s project page has also undergone some face lift and reorganization. The documentation is now on a separate page, and there’s a new examples page (at this moment, only three examples are included, but I will be adding more soon, I promise).

There is also a special bonus for all the people who want to modify the plugin’s source code and implement their own solutions based on it — I have made available an extensively commented version of the source code.

34 Responses to “ImgAreaSelect 0.9”

  1. Nils says:

    Love it!

    Realy sweet! I waited so long for “onInit”.

    Thanks for that

  2. Mauvis says:

    Thanks Michał this is great!

  3. Denis says:

    BIG thanks!

  4. frank basti says:

    how do i send the cordinates to a hidden form field?
    i want to use your script to crop an image..

    I am using classic asp.

    Thanks in advance

    Franky

  5. Björn Andreasson says:

    Hi! Can’t get the setSelection-thingie to work. I want the a default selection in my image from start and have put this in my document.ready-function:

    var ias = $(‘#uploaded_image’).find(‘#thumbnail’).imgAreaSelect({ instance: true });
    ias.setSelection(0, 0, 92, 66, true);
    ias.update();

    Nothing happens though (can’t see the selection box). What am I missing? (otherwise the script works great, thanks! :)

  6. Michal Wojciechowski says:

    @frank basti:
    Assuming you have the following hidden fields:

    <input id="x1" type="hidden" name="x1" value="" />
    <input id="y1" type="hidden" name="y1" value="" />
    <input id="x2" type="hidden" name="x2" value="" />
    <input id="y2" type="hidden" name="y2" value="" />

    Initialize imgAreaSelect with an onSelectEnd callback function that fills the inputs with the x/y coordinates from the selection object:

    $('img').imgAreaSelect({
        onSelectEnd: function (img, selection) {
            $('#x1').val(selection.x1);
            $('#y1').val(selection.y1);
            $('#x2').val(selection.x2);
            $('#y2').val(selection.y2);
        }
    });

    I’ll probably add this to the examples page in the next few days.

  7. Michal Wojciechowski says:

    @Björn:
    If you just need to show the default selection when the plugin is initialized, then you don’t really need the instance, as you can simply use the x1, y1, x2, and y2 options to set the initial selection:

    $('img').imgAreaSelect({ x1: 0, y1: 0, x2: 92, y2: 66 });

  8. Nathan says:

    Hi Michal,

    First off, thanks for this plugin, it is great!

    However, like Björn, I am having trouble with the instance api feature :(

    I am using the latest v0.9. It initializes just fine and I can drag boxes etc.. Now I have a link that calls that highlite function and it bombs out on the setSelection funciton. Right before that call I alert the ias object and I get the good old “[object object]” message telling me that, well, I have an object. Anything beyond that is unhappy:(

    Below is my script:

    ———————————————-
    var ias;

    $(document).ready(function()
    {
    ias = $(‘#photo’).imgAreaSelect({
    instance: true,
    handles: true,
    onSelectEnd: function (img, selection) {
    alert( selection.x1 + ‘, ‘ + selection.y1 );
    }
    });
    });

    function highlite()
    {

    alert(ias);
    ias.setSelection(1, 1, 50, 50, true);
    ias.update();

    }
    ———————————————-

    Eventually, I want to use the instance to highlite multiple areas “tagged” on a given photo – basically I am building a “photo tagging” and its subsequent “tag display” ability.

    Any help would be much appreciated! Or even a working example that I can compare to? There is a good chance it is probably something simple I am overlooking…. but I am stumped :(

    Thanks for your help and, again, for this plugin!

  9. Mauro says:

    Very Nice job Michal.. when the version 1.0 ?
    I really looking foward to it !!!

  10. Michal Wojciechowski says:

    @Nathan:
    Add the show: true option, either when the plugin is initialized, or later using setOptions(). I’ll update the API documentation, as this piece of information is missing.

  11. Michal Wojciechowski says:

    @Mauro:
    It’s in the planning stage :) I’ll post about the planned updates in a few days.

  12. Kevin Wilson says:

    Firstly, this is a really great plugin!

    Here’s where I’m having problems: I’m trying to use it within a panel which can be hidden or shown depending on some other conditions. When I hide the div containing the image I’ve attached imgAreaSelect to, the image and all the other contents of the div are hidden, but the selection and handles are still visible, so it looks like this:

    http://s927.photobucket.com/albums/ad112/kevinwilson1979/?albumview=grid

    Is there a way to get around this?

    Thanks

  13. Michal Wojciechowski says:

    @Kevin:
    Yes, simply call the plugin again with the hide: true option when you’re hiding the panel, e.g.:
    $('img').imgAreaSelect({ hide: true });
    Then, to show it, call it with show: true.

    You can also try using the parent option to append the plugin elements to the panel, instead of <body> — this way hiding the panel should automatically hide the plugin.

  14. cmnajs says:

    hi, i am using the following, but its not working

    $(‘img’).imgAreaSelect({ x1: 0, y1: 0, x2: 92, y2: 66 });

    it gives error that imgOfs is undefiend in function viewX(x)

    can you tell me where i am wrong

  15. Michal Wojciechowski says:

    @cmnajs:
    You’re not wrong, unfortunately there’s a bug in version 0.9. It has already been reported to me and I’m going to release an updated version in a few hours.

    For a quick workaround, initialize the plugin in $(window).load() instead of $(document).ready() — that should fix the problem.

  16. Kevin Wilson says:

    Hi Michal,

    Thanks for your quick reply. I went with the ‘parent’ option in the end, and it works perfectly. Thanks again for the plugin!

    Kevin

  17. Alan says:

    Anybody know how to show the coordinates whilst dragging the handles?

  18. Mats says:

    Really great plugin! I just have one problem:
    The users activate imgAreaSelect on an image by checking a checkbox. Activation:

    $(‘#image1′).imgAreaSelect({
    aspectRatio: ’3:2′,handles: true,x1:10,y1:10,x2:100,y2:70,onSelectEnd: showCropInfo
    });

    If they want to cancel the operation, I now use:

    $(‘#image1′).imgAreaSelect({ hide: true });

    If they click in the image area they still get the selection area though.

    How can I totally remove this possibility?

  19. Michal Wojciechowski says:

    @Mats:
    You can use the disable and enable options to toggle imgAreaSelect on and off.

  20. fritzthecat says:

    I guess you are too busy to moderate comments… in which case I will hack your plugin to allow for multiple boxes. Thanks anyway.

  21. fritzthecat says:

    Hi Michael – sorry about the previous comment, I thought I had posted a comment earlier and to see whether it was possible to have multiple boxes. I thought the comment was being moderated but obviously I hadn’t posted it at all!!

  22. Michal Wojciechowski says:

    @fritzthecat:
    You did post it, and I replied, but it was in another post :) Here’s my reply: http://odyniec.net/blog/2009/08/imgareaselect-0-9-1/comment-page-1/#comment-3209

  23. Hendrix says:

    I have several images. Can I use one area for all images? So If I select an area in the image 1 and then select an area in the image 2, the first image area disappears.

  24. Michal Wojciechowski says:

    @Hendrix:
    Technically — no, as you need to use a separate instance for each image. With multiple instances, you can use the onSelectStart callback function to hide the other selection areas, e.g.:

    onSelectStart: function (img) { $('img').not(img).imgAreaSelect({ hide: true }); }

  25. have built a facebook style phototagging system, currently working on version 2
    Check it out here.

    http://www.neillh.com.au/phototagging2/

  26. Michal Wojciechowski says:

    @Neill:
    Thanks for sharing — looks really nice.

  27. @Michal
    Hi Michal,
    Thank you for the imagAreaSelect plugin.

    I have some questions about it.
    I am trying to hide my form if the user clicks away from the tagged area. I thought the onSelectEnd would trigger this but it is only when the mouse has unclicked from tagging.

    what event is fired when they click the image and the shaded overlay disappears? how can I interact with this to hide my form?

    Thank you

  28. Michal Wojciechowski says:

    @Neill:
    You should be fine with using onSelectEnd for this purpose — if the user clicked on the overlay, onSelectEnd is called, and the selection object passed has the width and height properties set to zero. So, you can use a simple if construct to catch this:

    if (selection.width == 0 && selection.height == 0) { // Do something... }

  29. ah works a treat, thanks Michal.

    Updated – http://www.neillh.com.au/phototagging2/

  30. Santosh says:

    Hi Micheal,

    Thank you for the imgAreaSelect plugin. Its a great plugin.

    I have question about extension.

    I want to select multiple different areas on the single image, and all the areas has to show up. Right now if i am trying to select second area, first area disappears, is there any way i can select multiple areas on the image?

    secondly can i set two different areas in setSelection and show two area at a time on image. if not can you suggest how can i do?

    Can you please suggest what are the best possible ways of doing?

    Thanks in advance.

    Santosh

  31. Michal Wojciechowski says:

    @Santosh:
    The plugin does not allow more than one area, but it can be extended to implement this — some people have built photo-tagging solutions based on it. Examples: http://www.sanisoft.com/blog/2009/01/23/img-notes-v02-a-couple-of-bug-fixes-and-some-more/ and http://www.neillh.com.au/phototagging2/. Maybe you could use one of these in you application.

  32. John says:

    I am having problems with the crop selection area. i have the cropping tool being used inside of a dialog box. when my dialog box is at the very top on the screen(not scrolled down) all works fine. But when the dialog box isn’t at the top of page the crop selection is off the image. i thought the parent options would take care of this problem but it didn’t. i always get the crop selection css to be off the image being cropped. any help is appreciated.
    my code is:

    $(document).ready(function(){
    imgAreaSelectObj = $(‘#imageToCutout’).imgAreaSelect({
    handles:true,

    onSelectChange: function(img,selection){
    var scaleX = $(‘#ii_frame_cutout_’+lcutout_id).width() / selection.width;
    var scaleY = $(‘#ii_frame_cutout_’+lcutout_id).height()/ selection.height;
    },
    aspectRatio: aspectratio,
    instance: true,
    zIndex: 9999,
    parent: ‘#imageEditDialog’,
    x1: x1,
    y1: y1,
    2: x2,
    y2: y2
    });
    });
    var imageEditDialog_ht = ’550px’;
    $( “#imageEditDialog” ).dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    position: ‘top’,
    minWidth: 600,
    width: ‘auto’,
    modal: true,
    //stack: true,
    open: function (event, ui)
    {
    },
    buttons:

    “OK”: function() {
    var id = iiframe.within_cutout($(‘#offset_left’).val(), $(‘#offset_top’).val());
    show_cropped_image(id);

    $( this ).dialog( “close” );
    }
    },
    close: function(event, ui)
    {
    imgAreaSelectObj.cancelSelection();
    }

    }).height(imageEditDialog_ht);

    Thank you very much

  33. Michal Wojciechowski says:

    @John: Sorry for the awfully late response. If you still have the problem, I’ll be happy to help you, but I’ll probably have to see a live demo of your site. Feel free to contact me by e-mail about that.

  34. John says:

    Yes i still have the problem. I haven’t figured it out yet. My problem is that i have dialog box with an image in it with imgareaselect attached to it. My crop selection is off the image. If i enable draggable on my dialog box and drag box around the crop selection moves depending on where dialog box is located. I can’t give a live demo I only have the site running locally on my machine. When I do put it up I will email you to check it out if I haven’t fix it by then. Thank you for your response.

Leave a Reply