Since most people are using the imgAreaSelect plugin to implement image cropping interfaces, and I’ve received a few requests for a fully functional example of such a thing, I planned to write a tutorial on it. But, it seems someone already did this — WebMotionUK has a good article on building a simple tool that allows you to upload an image and crop it, with PHP and imgAreaSelect. So go ahead and read it.
If you have any other interesting examples of using imgAreaSelect, let me know — I’ll be happy to put a link here.
Very nice plug-in, congratulation dude… I use it coupled with http://www.gen-x-design.com/projects/php-thumbnailer-class/ and
http://www.pixeline.be/experiments/jqUploader/
works perfectly. (was for my website admin can’t give url)
see ya
how about integrating an image tagging system ?
@andy:
This has been requested a few times, but I think including such application-specific features would make the plugin too complicated. It’s supposed to be simple and just let you select an area of the image, then it’s up to you to decide what you want to do with it — whether it’s tagging, cropping, or whatever else.
Tagging could be handled by a couple additional functions (or maybe a separate plugin). If I have enough spare time, I’ll add an example of how to implement this.
@Michal:
yup, much appreciated.
After seeing the imagetags plugin at Gallery2 (fortunately), I went ahead to do some mods myself (to be used independently) using your ImgAreaSelect 0.5. Still in progress though.
By the way, do you care to explain more about the Webkit-based browsers bug in your latest post http://odyniec.net/blog/?p=27 ? I don’t see any problems in my 0.2.149.27 Chrome. Will upgrade soon to 0.5.1 nonetheless, just to play safe.
Thanks for your hard work.
@andy:
The bug occurred when the page was scrolled, and resulted in the plugin elements being displaced. If you want to see it in all its shameful glory, go to http://odyniec.net/projects/imgareaselect-0.5/, scroll the page a bit, and then start selecting.
thanks for a script….i want the default selection on image…like when i upload an image, the script will automatically show a selection area on image…any idea how to do that
@shyju: See this example: http://odyniec.net/projects/imgareaselect/examples.html#setting-initial-selection
great script! How can I have both an initial selection area as well as fix the aspect ratio?
@Paul: Use the
x1, y1, x2, y2options and theaspectRatiooption when you initialize the plugin. Example:$('img').imgAreaSelect({ x1: 50, y1: 50, x2: 150, y2: 125, aspectRatio: '4:3' });Thanks for the quick response. I’m having trouble however. Here is my code:
$(document).ready(function () {
$(‘#bigimgv’).imgAreaSelect({x1: 0, y1: 0, x2: 80, y2: 100, onSelectChange: preview, aspectRatio: ’4:5′, handles: true});
});
The preselected area does not appear and also, I can’t select the area with click and drop method in IE.
Any ideas?
Sorry, meant to say “click and drag”
@Paul: The options seem OK. Have you implemented the
previewfunction in your code? If so, and the problem is still there, please contact me by e-mail and let me know if you can show me the live site.Hi Michael, I sent you an email at odyniec@odyniec.net on 8/25 regarding the issues I’m having with preview and the selection area. Have you had a chance to take a look?