Q:

Web Interface to allow user to select rectangle within image

I am familiar with a few web technologies, but currently was asked to find an easy solution for the task below - and I struggle to decide what approach to take.  Is there an existing solution for this?  Can this be done in javascript?  Or does it require flash? 
The user will be shown a photo and will have to select a rectangle within the photo (which will later be cropped).  The selected rectangle must meet certain size/ration requirements.  The actual cropping can easily be done by the server, but I wanted to ask for suggestions what would the best way be to tackle the front-end interface which would take the selected rectangle coordinates, possibly do basic calculations (check ratio etc) on them and upon approval send them to the server. 
This is gives you an idea:
http://i.stack.imgur.com/Fp2H9m.png
No special mobile support needed - ie desktop browsers only. 
Thanks a million,
FSG

A:

A demo of the imgareaselect library: 

$(document).ready(function () {
    $('#pic').imgAreaSelect({
        handles: true
    });
});
img#pic{
  width:500px;
  margin:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect.pack.js"></script>

<link rel="stylesheet" type="text/css"
        href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css" />
<img id="pic" src="https://c4.staticflickr.com/4/3552/3360463235_8997ec6278_b.jpg" />

