设置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' 
    }); 
});