Предварительный просмотр Jcrop сдвинут?

Question

Я использую Jcrop, и пока он работает нормально, изображение предварительного просмотра выглядит так, будто его кормят неправильными координатами. Я подозреваю, что моя функция javascript виновата, но я уже несколько часов борюсь с отсутствием решения. Любая помощь? Вот скрипку с моим кодом:

http://jsfiddle.net/1vetnqu0/

HTML:

<div class="content"> 
    <a class="lol" href="#este">Upload image!</a> 
</div> 

<div id="este" class="mfp-hide popup zoom-anim-dialog"> 
    <h4>Upload image</h4> 
    <form id="form1"> 
     <input type='file' id="imgInp" /> 
     <img id="blah" class="crop" src="#" alt="your image" /> 
     <input type="hidden" id="x" name="x" /> 
     <input type="hidden" id="y" name="y" /> 
     <input type="hidden" id="w" name="w" /> 
     <input type="hidden" id="h" name="h" /> 
    </form> 

    <div style="width:100px;height:100px;overflow:hidden; margin-top: 20px;"> 
     <img id="preview" /> 
    </div> 

</div> 

JAVASCRIPT:

$(document).ready(function() { 
     $('.lol').magnificPopup({ 
      type: 'inline', 

      fixedContentPos: false, 
      fixedBgPos: true, 

      overflowY: 'auto', 

      closeBtnInside: true, 
      preloader: false, 

      midClick: true, 
      removalDelay: 300, 
      mainClass: 'my-mfp-slide-bottom' 
     }); 
    }); 

    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
       $('#preview').attr('src', e.target.result); 
       $('.crop').Jcrop({ 

        onSelect: updateCoords, 
        onChange: showPreview, 
        aspectRatio: 1, 
        bgOpacity: .4, 
        setSelect: [ 100, 100, 50, 50 ] 

       }); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     console.log(this); 
     readURL(this); 
    }); 

    function updateCoords(c) 
    { 
     console.log(c); 
     $('#x').val(c.x); 
     $('#y').val(c.y); 
     $('#w').val(c.w); 
     $('#h').val(c.h); 
    }; 

    function showPreview(coords) 
    { 
     var rx = 100/coords.w; 
     var ry = 100/coords.h; 

     $('#preview').css({ 
      width: Math.round(rx * 500) + 'px', 
      height: Math.round(ry * 500) + 'px', 
      marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
      marginTop: '-' + Math.round(ry * coords.y) + 'px' 
     }); 
    } 

Спасибо большое!

Answer 1

У меня были аналогичные проблемы с jCrop раньше. Есть несколько подпорок, которые могли бы устранить проблему здесь: trueSize и ширину рамки, boxHeight

Ссылка страницы: http://deepliquid.com/content/Jcrop_Sizing_Issues.html