Upload Crop Image dengan imgareaselect (2)

<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>

<?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['x1'],$_POST['y1'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
  imagejpeg($dst_r,'test2.jpg',$jpeg_quality);
}
?>

<script type="text/javascript" src="../scripts/plugins-jquery-cropimg.min.js"></script>
<script>
$(function(){
function pick(input) {
    if(input.files && input.files[0] && input.files[0].type.match('image*')){
        var reader = new FileReader();
    var n = String(input.name).replace('img','');
        reader.onload = function (e) {
        $('#imgPreview').prop('src', e.target.result).show();
        }
        reader.readAsDataURL(input.files[0]);
    }
    if (!String(input.files[0].name).match(/(?:gif|jpg|png|bmp)$/)) {
        alert('Harap pilih file gambar saja dengan format JPG, PNG, atau GIF');
        input.value='';
    }
}
$('.i-file').on('change',function(){
    pick(this);
})

$('#imgPreview').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);
    }
});
})
</script>
<form action="" method="post" enctype="multipart/form-data">
<p><img id="imgPreview" style="display:none" width=620 align="middle" /><input type="file" class="i-file" name="img" /></p>
<p><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="" /></p>
<p><input type="submit" name="simpan" /></p>
</form>