title: How to crop a image with php using jquery imgAreaSelect?
body: <p>i'm using the following javascript code to instanciete jquery <a href="http://odyniec.net/projects/imgareaselect/" rel="noreferrer">imgAreaSelect</a> to crop my image.</p>
  
  <pre><code>$(document).ready(function () {
      $('#ladybug').imgAreaSelect({
          onSelectEnd: 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);            
          }
      });
  });
  </code></pre>
  
  <p>This relates to the following (example) html code:</p>
  
  <pre><code>&lt;div&gt;
      &lt;img id="ladybug" src="ladybug.jpg" alt="" /&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
     &lt;form action="#" method="post"&gt;
        &lt;input id="x1" type="hidden" name="x1" value="" /&gt;
        &lt;input id="y1" type="hidden" name="y1" value="" /&gt;
        &lt;input id="x2" type="hidden" name="x2" value="" /&gt;
        &lt;input id="y2" type="hidden" name="y2" value="" /&gt;
        &lt;input type="submit" name="submit" value="Submit" /&gt;
     &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/GIIOT.jpg" alt="example imgAreaSelect"></p>
  
  <p>This works perfectly, i'm getting all the right information back to php when submitting the form. However, now i have to use php to modify the image by the coordinates that the form just send. And this was harder then i thought. </p>
  
  <pre><code>$image_info = getimagesize($filename);
  $image = imagecreatefromjpeg($filename);
  
  $width = imagesx($image);
  $height = imagesy($image);
  
  $resized_width = ((int)$formData["x2"]) - ((int)$formData["x1"]);
  $resized_height = ((int)$formData["y2"]) - ((int)$formData["y1"]);
  
  $resized_image = imagecreatetruecolor($resized_width, $resized_height);
  imagecopyresampled($resized_image, $image, 0, 0, (int)$formData["x1"], (int)$formData["y1"], $resized_width , $resized_height, $width, $height);
  imagejpeg($resized_image, $filename);
  </code></pre>
  
  <p>The above script works but it uses the coordinates/width/height in the wrong way. i'm always left over with a big black border in the resized image:</p>
  
  <p><img src="https://i.stack.imgur.com/TYfRt.jpg" alt="example wrong cropped image"></p>
  
  <p>Can anyone set me in the right direction?</p>