Upload Crop Image dengan imgareaselect

<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
$(function () {
$('#crop').imgAreaSelect({
  aspectRatio: '2:1',
  handles: true,
  onSelectChange: function (img, selection) {
    $('input[name="x1"]').val(selection.x1);
    $('input[name="y1"]').val(selection.y1);
    $('input[name="x2"]').val(selection.x2);
    $('input[name="y2"]').val(selection.y2);
    $('input[name="w"]').val(selection.width);
    $('input[name="h"]').val(selection.height);
  }
});
});
function cekCrop(){
    if (parseInt($('#w').val())) return true;
    return false;
}
</script>

<p style="text-align: center;">
<img id="crop" src="12.jpg" width=620 />
</p>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
  $targ_w = 620;
  $targ_h = 310;
  $jpeg_quality = 90;
  $src = '12.jpg';
  $img_r = imagecreatefromjpeg($src);
  $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
  imagecopyresampled($dst_r,$img_r,0,0,$_POST['x2'],$_POST['y2'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
  imagejpeg($dst_r,'test2.jpg',$jpeg_quality);
}
?>

<form action="" method="post" onsubmit="return cekCrop();">
  <input type="text" name="x1" value="" />
  <input type="text" name="y1" value="" />
  <input type="text" name="x2" value="" />
  <input type="text" name="y2" value="" />
  <input type="text" name="w" id="w" value="" />
  <input type="text" name="h" value="" />
  <input type="submit" name="submit" value="Submit" />
</form>