Select part of image and extract its coordinates using jQuery

Question

I need the user to be able to select part of the image by resizing the transparent rectangle or by clicking and dragging the selection area (as it was on the desktop OS), both will work for me. Then I need to get the coordinates of the selected area using jQuery.

Please recommend samples or sections (if any), methods or sections of the API documentation that might help.

Answer 1

See Jcrop and this demo.

<!-- This is the image we're attaching Jcrop to --> <img src="demo_files/pool.jpg" id="target" alt="Flowers" /> 

And the script:

 <script type="text/javascript"> jQuery(function($){ $('#target').Jcrop({ onChange: showCoords, onSelect: showCoords }); }); // Simple event handler, called from onChange and onSelect // event handlers to show an alert, as per the Jcrop // invocation above function showCoords(c) { alert('x='+ cx +' y='+ cy +' x2='+ c.x2 +' y2='+ c.y2) alert('w='+cw +' h='+ ch) }; </script>