Jcrop Cropbox image preview is different than original cropped image

Jcrop Cropbox image preview is different than original cropped image

I am cropping an image with JCrop. In Preview pane, the image is perfect.
But when cropped, it is getting other co-ordinate and crops a different
area on the image. How can I fix the preview co-ordinate and the crop
co-ordinate?
Cropping preview:

After Crop:

Code where the image is being shown:
<img src="uploads/destination_<?php echo $filename; ?>" id="target"
alt="crop" />
<div id="preview-pane">
<div class="preview-container">
<img src="uploads/destination_<?php echo $filename; ?>"
class="jcrop-preview" alt="Preview" />
</div>
</div><!-- @end #preview-pane -->
<div id="form-container">
<form id="cropimg" name="cropimg" method="post" action="crop.php"
target="_blank">
<input type="hidden" id="x" name="x">
<input type="hidden" id="y" name="y">
<input type="hidden" id="w" name="w">
<input type="hidden" id="h" name="h">
<input type="submit" id="submit" value="Crop Image!">
</form>
</div><!-- @end #form-container -->
Crop.php code:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w = 150;
$targ_h = 94;
$jpeg_quality = 90;
if(!isset($_POST['x']) || !is_numeric($_POST['x'])) {
die('Please select a crop area.');
}
$src = 'uploads/'.$fname;
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor($targ_w, $targ_h);
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,"uploads/img_new.jpeg",$jpeg_quality); // NULL will
output the image directly
exit;
}
?>