title: How to automatically show select for crop on image
body: <p>I was wondering how can I make imgareaselect select automactically once photo file is selected? so that the user knows that they can crop on what to use in a photo so far I have:</p>
  
  <p>What I'm trying to achieve is when I select an image file I'm trying to make imgareaselect select a part of the photo automatically.</p>
  
  <p>imgareaselect documentation: <a href="http://odyniec.net/projects/imgareaselect/usage.html" rel="nofollow">http://odyniec.net/projects/imgareaselect/usage.html</a></p>
  
  <p>jQuery code:</p>
  
  <pre><code>// set info for cropping image using hidden fields
  function setInfo(i, e) {
  // Get on screen image
  var screenImage = $("#uploadPreview");
  
  // Create new offscreen image to test
  var theImage = new Image();
  theImage.src = screenImage.attr("src");
  
  // Get accurate measurements from that.
  var imageWidth = theImage.width;
  
  //Get width of resized image
  var scaledimagewidth = document.getElementById("uploadPreview").width;
  
  if ( imageWidth &gt; scaledimagewidth){ var ar = imageWidth/scaledimagewidth;}
  else { var ar = 1;}
      $('#x').val(e.x1*ar);
      $('#y').val(e.y1*ar);
      $('#w').val(e.width*ar);
      $('#h').val(e.height*ar);
  }
  $(document).ready(function () {
      var p = $("#uploadPreview");
      // prepare instant preview
      $("#uploadImage").change(function () {
          // fadeOut or hide preview
          p.fadeOut();
          // prepare HTML5 FileReader
          var oFReader = new FileReader();
          oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
          oFReader.onload = function (oFREvent) {
              var image = new Image();
              image.src = oFREvent.target.result;
              image.onload = function () {
                  if ((this.width &gt;= 4500) || (this.height &gt;= 4500)) {
                      alert("Picture Has to Be Lower Than 4500 by 4500, choose another file");
                  }
                  else {
                      p.attr('src', oFREvent.target.result).fadeIn();
                  }
                  // access image size here &amp; do further implementation
              };
          };
      });
      // implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
      $('img#uploadPreview').imgAreaSelect({
          aspectRatio: '1.33:1',
          onSelectEnd: setInfo
      });
  });
  </code></pre>
  
  <p>HTML markup:</p>
  
  <pre><code>    &lt;div class="wrap"&gt;
          &lt;!-- image preview area--&gt;
          &lt;img id="uploadPreview" style="display:none;"/&gt;
  
          &lt;!-- image uploading form --&gt;
          &lt;form action="upload.php" method="post" enctype="multipart/form-data"&gt;
              &lt;input id="uploadImage" type="file" accept="image/jpeg" name="image" /&gt;
              &lt;input type="submit" value="Upload"&gt;
  
              &lt;!-- hidden inputs --&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;
      &lt;/div&gt;
  </code></pre>