function preview(img, selection) {
    if (!selection.width || !selection.height) return;
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;
    $('#preview img').css({
        width: Math.round(scaleX * 200),
        height: Math.round(scaleY * 200),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });
    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
}
$(function() {
    $('#photo').imgAreaSelect({

        handles: false,
        fadeSpeed: 200,
        onSelectChange: preview,
        resizable: false,
        persistent: true,
        show: true,
        x1: 10,
        y1: 10,
        x2: 100,
        y2: 100
    });

});

Setting Validate Copy Format

#demo{
  background: none repeat scroll 0 0 #EEEEEE;
  border: 2px solid #999;
  border-radius: 4px 4px 4px 4px;
  padding: 0.6em;
  float: left;
  width:90%;
}
.leftside{
  float: left;
  width:50%;
}
.rightside{
  float: left;
  margin-top:11%;
  width:40%;
}
#demo p.instructions {
  color: #666666;
  font-family: serif;
  font-style: italic;
  line-height: 130%;
  font-size:13px;
}
div.frame {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 2px solid #DDDDDD;
  padding: 0.8em;
}
.leftframe{
  margin: 0 0.3em;
  
  width: 200px;
  
  height: 200px;
}
.rightframe{
  margin: 0 1em;
  
  width: 100px;
  
  height: 100px;
  http://codebins.com/#
}
.previewframe{
  width: 100px;
  
  height: 100px;
  
  overflow: hidden;
}
.crop{
  margin-left:20%;
  margin-top:1%;
}
.imginfo{
  font-size:13px;
  width:100%;
}
.imginfo input[type=text]{
  width:80px;
  text-align:right;
  border:1px solid #666;
}

Setting Validate Copy Format

<div id="demo">
  <div class="leftside">
    <p class="instructions">
      Click and drag on the image to select an area. 
    </p>
    <div  class="frame leftframe">
      <img src="https://solarsystem.nasa.gov/system/basic_html_elements/11561_Sun.png" id="photo">
    </div>
  </div>
  <div class="rightside">
	<div class="frame rightframe">
      <div class="previewframe" id="preview">
        <img style="width: 100px; height: 100px;" src="https://solarsystem.nasa.gov/system/basic_html_elements/11561_Sun.png" />
      </div>
	</div>
	<table class="imginfo">
      <tr>
        <th colspan="2">
          Coordinates
        </th>
        <th colspan="2">
          Dimensions
        </th>
      </tr>
      <tr>
        <td>
          X1:
        </td>
        <td>
          <input type="text" value="-" id="x1" />
        </td>
        <td>
          Width:
        </td>
        <td>
          <input type="text" value="-" id="w" />
        </td>
      </tr>
      <tr>
        <td>
          Y1:
        </td>
        <td>
          <input type="text" value="-" id="y1" />

        </td>
        <td>
          Height:
        </td>
        <td>
          <input type="text" value="-" id="h" />

        </td>
      </tr>
      <tr>
        <td>
          X2:
        </td>
        <td>
          <input type="text" value="-" id="x2" />

        </td>
        <td colspan="2">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          Y2:
        </td>
        <td>
          <input type="text" value="-" id="y2" />

        </td>
        <td colspan="2">
          &nbsp;
        </td>
      </tr>
    </table>
  </div>
</div>

Copy Format

Download