设置 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

原来我不需要那么多代码来按照我想要的方式调整预览大小。在实例化裁剪器之前，我只需要将预览的最大尺寸设置为原始尺寸。

出于某种原因，我需要在高度上增加 4 个像素，以使预览与原始图像的高度完全相同。也许裁剪器 canvas 在图像周围添加了额外的高度和宽度？

$(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'
  });
});

设置 fengyuanchen jQuery Cropper.js v3.0.0 预览大小与图片相同

Set fengyuanchen jQuery Cropper.js v3.0.0 Preview Size to Same as Image

javascript

jquery

height

preview

cropperjs