設置fengyuanchen jQuery Cropper.js v3.0.0預覽大小與圖像相同

Question

我對fengyuanchen jQuery Cropper.js v3.0.0有一個小問題。我試圖覆蓋默認的預覽代碼，使其尺寸與原始圖像的顯示尺寸相同。

我目前遇到的問題是，一旦圖像的高度超過了原始圖像的顯示尺寸，預覽會比原始圖像大得多。我寧願它保持在同一高度。

這是我描述的行爲。注意預覽的高度：

的默認行爲顯示預覽比原始圖像更小：

是我想什麼是使預覽保持在高度相同原始圖像，並且不能超過它：

這裏是我的代碼：

<div class="col col-6"> 
    <img id="image" src=picture.jpg> 
</div> 
<div class="col col-3"> 
    <div class="preview"></div> 
</div> 

//css 
.preview { 
    overflow: hidden; 
    width: 200px; 
    height: 200px; 
} 

//JS: 
$(function() { 
    var $preview = $('.preview'); 
    var cropper = $('#image').cropper({ 
     ready: function (e) { 
     var $clone = $(this).clone().removeClass('cropper-hidden'); 

     $clone.css({ 
      display: 'block', 
      width: '100%', 
      minWidth: 0, 
      minHeight: 0, 
      maxWidth: 'none', 
      maxHeight: 'none' 
     }); 

     $preview.css({ 
      width: '100%', 
      overflow: 'hidden'//, 
      //maxHeight: $(this).cropper('getContainerData').height + 'px' 
     }).html($clone); 
     }, 
     crop: function(e) { 
     var imageData   = $(this).cropper('getImageData'), 
      previewAspectRatio = e.width/e.height, 
      previewWidth  = $preview.width(), 
      previewHeight  = previewWidth/previewAspectRatio, 
      imageScaledRatio = e.width/previewWidth; 

    //if (previewHeight > $(this).cropper('getContainerData').height) { 
     //??? 
    //} 
     $preview.height(previewHeight).find('img').css({ 
       width: imageData.naturalWidth/imageScaledRatio, 
       height: imageData.naturalHeight/imageScaledRatio, 
       marginLeft: -e.x/imageScaledRatio, 
       marginTop: -e.y/imageScaledRatio 
     }); 
     } 
    }); 
}); 

Answer 1

原來，我並不需要那麼多的代碼來按我想要的方式調整預覽大小。我只需要將預覽的最大尺寸設置爲原始BEFORE實例化裁剪器的尺寸。

出於某種原因，我需要將4個像素添加到高度以使預覽與原始圖像的高度完全相同。也許裁剪畫布增加了圖像周圍的高度和寬度？

$(function() { 
    var $image = $('#image'), 
     $image.height() + 4; 

    $('.preview').css({ 
    width: '100%', //width, sets the starting size to the same as orig image 
    overflow: 'hidden', 
    height: height, 
    maxWidth: $image.width(), 
    maxHeight: height 
    }); 

    $image.cropper({ 
     preview: '.preview' 
    }); 
});