Image crop using jquery and php

Download jquery plugin from: http://code.google.com/p/jcrop/

create a folder named: crop

create a folder named: css

create a folder named: img

create a folder named: js

move Jcrop.jpg and jquery.Jcrop.min.css to /css folder

move jquery.color.js, jquery.Jcrop.js and jquery.min.js to /js folder

place a image named pool.jpg to /img folder

create a file index.php:

<?php

<link rel="stylesheet" type="text/css" href="/css/jquery.Jcrop.min.css" /> 

<script type="text/javascript" src="/js/jquery.color.js"></script> 

<script type="text/javascript" src="/js/jquery.Jcrop.js"></script>

?>
<img src="/img/pool.jpg" id="cropbox" alt="Flowers" />
<script type="text/javascript">

    jQuery(function($){
        jQuery('#cropbox').Jcrop({
            onChange: showCoords,
            onSelect: showCoords
        });
        function showCoords(c)
        {
            jQuery('#x1').val(c.x);
            jQuery('#y1').val(c.y);
            jQuery('#x2').val(c.x2);
            jQuery('#y2').val(c.y2);
            jQuery('#w').val(c.w);
            jQuery('#h').val(c.h);
        };
        $("#imageResizeValirables").submit(function() {
            var formData = $(this).serialize();
            $.post('/action.php', formData, function(returnData) {
                if(returnData == 'success') {
                    $("#croppedImage").attr("src", "/crop/"+$("#beCroppedImage").attr("value") + "?" + new Date().getTime());
                } else {
                    alert("Try again please.");
                }
            });
        });
    });

</script>

<form onsubmit="return false;" id="imageResizeValirables" class="coords">
    <input type="hidden" id="beCroppedImage" name="img" value="pool.jpg">
    <input type="hidden" size="4" id="x1" name="x1" />
    <input type="hidden" size="4" id="y1" name="y1" />
    <input type="hidden" size="4" id="x2" name="x2" />
    <input type="hidden" size="4" id="y2" name="y2" />
    <input type="hidden" size="4" id="w" name="w" />
    <input type="hidden" size="4" id="h" name="h" />
    <input type="submit" value="Resize">
</form>
<img id="croppedImage" alt='' />

create another file action.php

$docRoot = $_SERVER["DOCUMENT_ROOT"];
$imageLocation = $docRoot . "/app/webroot/img/" . $_POST["img"];
$newImageLocation = $docRoot . "/app/webroot/crop/" . $_POST["img"];
 if (file_exists($imageLocation)) {
     list($current_width, $current_height) = getimagesize($imageLocation);
     $x1 = (int) $_POST['x1'];
     $y1 = (int) $_POST['y1'];
     $x2 = (int) $_POST['x2'];
     $y2 = (int) $_POST['y2'];
     $w = (int) $_POST['w'];
     $h = (int) $_POST['h'];

      $crop_width = $w;
      $crop_height = $h;
      $new = imagecreatetruecolor($crop_width, $crop_height);
      $current_image = imagecreatefromjpeg($imageLocation);
      imagecopyresampled($new, $current_image, 0, 0, $x1, $y1, $crop_width, $crop_height, $w, $h);
      imagejpeg($new, $newImageLocation, 100);
      echo "success";
      exit;
 }
 echo "fail";
 exit;