title: Image select area for image cropping
body: <p>my task is </p>
  
  <p>step 1:upload an image </p>
  
  <p>step 2: check the min criteria if criteria is less then 399 X 150 then it will show an error MSG "Image is too small"</p>
  
  <p>step 3:and if image is bigger then 850 X 315 then there will be option for cropping.</p>
  
  <p>step 4: cropping display area is fix that was 145 x 190  .</p>
  
  <p>this is my jsfiddle:<a href="http://jsbin.com/eZEBUBI/3/edit" rel="nofollow">here</a></p>
  
  <p>please check jsfiddle i am able to do all functionality but not proper criteria </p>
  
  <p>html code for this is:</p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;jQuery UI Tooltip - Default functionality&lt;/title&gt;
          &lt;link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css"&gt;
      &lt;/head&gt;
      &lt;body &gt;
          &lt;input type="file" id="choose"&gt;
        &lt;div id="uploadPreview"&gt;&lt;/div&gt;
    &lt;div id="selectPreview" style="height:50px;"&gt;&lt;/div&gt;
  
          &lt;script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css code for this is:</p>
  
  <pre><code>#selectPreview {
      overflow: hidden;
  }
  </code></pre>
  
  <p>and javascript code for this:</p>
  
  <pre><code>$( document ).ready(function() {
  
  function each(arr, fn, scope, args) {
      for (var i = 0, l = arr.length; i &lt; l; i++) {
          if (args) fn.apply([arr[i]].concat(args));
          else fn.call(scope, arr[i], i, arr);
      }
  }
  
  // Get elements by CSS selector:
  function qs(selector, scope) {
      return (scope || document).querySelector(selector);
  }
  function qsa(selector, scope) {
      return (scope || document).querySelectorAll(selector);
  }
  
  // addEventListener wrapper:
  function on(target, type, callback) {
      if (target.length) each(target, function(target) {
          on(target, type, callback);
      });
      else target.addEventListener(type, callback, false);
  }
  
  
  var uploadPreview = qs('#uploadPreview');
  var selectPreview = qs('#selectPreview');
  var imgDescP;
  var uploadPreviewImg;
  var selectPreviewImg;
  var uploadedImgW;
  var uploadedImgH;
  
  
  function readImage(file) {
      var reader = new FileReader();
      var image = new Image();
      var maxw = 800;
      var maxh = 350;
  
      on(reader, 'load', function(_file) {
          on(image, 'load', function() {
              uploadedImgW = this.width;
              uploadedImgH = this.height;
              var kb = ~~ (file.size / 1024);
  
              if (uploadedImgH &gt; maxh || uploadedImgW &gt; maxw) {
                  alert("Image is too big!");
                  return;
              }
  
              var appendNeeded;
              if (!uploadPreviewImg) {
                  uploadPreviewImg = document.createElement('img');
                  imgDescP = document.createElement('p');
                  selectPreviewImg = document.createElement('img');
                  appendNeeded = true;
              }
              uploadPreviewImg.src = this.src;
              selectPreviewImg.src = this.src;
              imgDescP.textContent =
                  uploadedImgW + 'x' + uploadedImgH + ' ' +
                  kb + 'KB ' + file.type + ' ' + file.name;
  
              selectPreview.style.width = uploadedImgW + 'px';
              selectPreview.style.height = uploadedImgH + 'px';
  
              if (appendNeeded) {
                  uploadPreview.appendChild(uploadPreviewImg);
                  uploadPreview.appendChild(imgDescP);
                  selectPreview.appendChild(selectPreviewImg);
              }
  
              $(uploadPreviewImg).Jcrop({
                  onChange: showPreview,
                  onSelect: showPreview,
                  aspectRatio: 1
              });
          });
          on(image, 'error', function () {
              console.log('Invalid file type: ' + file.type);
          });
          image.src = _file.target.result; // url.createObjectURL(file);
      });
      reader.readAsDataURL(file);
  }
  
  on(qs("#choose"), 'change', function (e) {
      if (this.disabled) return console.log('File upload not supported!');
      if (this.files[0]) readImage(this.files[0]);
  });
  
  
  function showPreview(coords) {
      var rx = 100 / coords.w;
      var ry = 100 / coords.h;
      var imgStyle = selectPreviewImg.style;
      imgStyle.width  = rx * uploadedImgW + '%';
      imgStyle.height = ry * uploadedImgH + '%';
      imgStyle.marginLeft = '-' + rx * coords.x + '%';
      imgStyle.marginTop  = '-' + ry * coords.y + '%';
  }});
  </code></pre>