Question

87

Select a portion of an image and retrieve its coordinates with jQuery

rated 0 times [ 89] [ 2] / answers: 1 / hits: 29293 / 12 Years ago, thu, march 22, 2012, 12:00:00

I need a way for user to select the portion of an image either by resizing transparent rectangle or by clicking and dragging the selection area (as it's done in desktop OS), both would work for me. Then i need to retrieve the coordinates of the selected area with jQuery.

Please recommend samples or tuts (if there are any), methods or API documentations sections that could help.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

xavier

Add To Favorites

Follow

Total Points: 711

Total Questions: 91

Total Answers: 121

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

answered 12 Years ago jerome · Accepted Answer

See Jcrop and it's demos.

<!-- 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='+ c.x +' y='+ c.y +' x2='+ c.x2 +' y2='+ c.y2)

  alert('w='+c.w +' h='+ c.h)

};



</script>