Select a portion of an image and retrieve its coordinates with jQuery
<html>
<head>
<title>Image Processs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
</head>
<body>
<img src="https://i.stack.imgur.com/UYYqo.jpg" alt="" id="image">
<script>
$(document).ready(function(){
$('#image').Jcrop({
onSelect: function(c){
console.log(c);
console.log(c.x);
console.log(c.y);
console.log(c.w);
console.log(c.h);
}
})
})
</script>
</body>
</html>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>