Since many people (okay, actually just six people) requested a few additional features for the imgAreaSelect plugin, I’m releasing an updated version. The plugin now supports moving and resizing of the selection area, width/height limits, and fixed proportions.
I’ve also added a couple more usage examples.
Great work – was searching for something which can create photo-notes like Flickr – any plans to add multiple areas?
No, I don’t plan to implement multiple selection areas on one image, as I think it would make the plugin too complex, and I want to keep it simple.
As for photo-notes, I imagine they could be added as new elements using the onSelectEnd callback. Here’s a primitive example:
onSelectEnd: function (img, selection) { var $note = $('<div></div>'); $note.css({ position: 'absolute', left: $(img).offset().left + selection.x1 + 'px', top: $(img).offset().top + selection.y1 + 'px', width: selection.width - 2 + 'px', height: selection.height - 2 + 'px', borderStyle: 'solid', borderWidth: '1px', borderColor: 'red' }); $('body').append($note); }Nice work!
How can I hide the created selection? I tried $(‘#selection’).hide(); but that doesnt work. Any solution?
There will be an option for this purpose in the next version — expect it any day now.
Nice plugin you made!
You considered yet to implement a minimum width and height? Would be useful on websites where you could add a profile picture by just uploading whatever picture with your face on it and then just cut it out. In that case a minimum width and height would be required. Of course then it might be necessary that the minimum marked area is immediately shown on the picture so users can only move it around and/or enlarge it.
Looking forward to it