title: Cropping Uploaded Image using Jcrop
body: <p>I am trying to crop an uploaded image using Jcrop. My intention is to crop the image when the user upload. I need not store the user uploaded image in the server. But, I should store only the part of image user selects via Jcrop to the server. Here is the <a href="http://jsfiddle.net/LvsYc/2507/" rel="nofollow">fiddle</a> link for the problem</p>
  
  <p>I have used the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id="form1"&gt;
      &lt;input type='file' id="imgInp" /&gt;
      &lt;img id="blah" class="crop" src="#" alt="your image" /&gt;
      &lt;input type="hidden" id="x" name="x" /&gt;
          &lt;input type="hidden" id="y" name="y" /&gt;
          &lt;input type="hidden" id="w" name="w" /&gt;
          &lt;input type="hidden" id="h" name="h" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;
  #blah {
      background-color: #FFF;
      width: 500px;
      height: 330px;
      font-size: 24px;
      display: block;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>Js:</p>
  
  <pre><code>function readURL(input) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
  
              reader.onload = function (e) {
                  $('#blah').attr('src', e.target.result);
              }
  
              reader.readAsDataURL(input.files[0]);
          }
      }
  
      $("#imgInp").change(function(){
          console.log(this);
          readURL(this);
           $(function(){
  
      $('.crop').Jcrop({
  
        onSelect: updateCoords,
  
              bgOpacity:   .4,
              setSelect:   [ 100, 100, 50, 50 ],
              aspectRatio: 16 / 9
      });
  
    });
      });
  
    function updateCoords(c)
    {
      console.log(c);
      $('#x').val(c.x);
      $('#y').val(c.y);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };
  </code></pre>
  
  <p>I tried like, after uploading image, the same image is used for JCrop, so that I can get the co-ordinate values to generate the rest of the image. My problem now is this: When uploaded, I get black color in the image spot rather than the uploaded image. Can anyone look into it and find what was wrong with the code?</p>