1

我对 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
        }); 
      } 
    });
});
4

1 回答 1

1

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

出于某种原因，我需要在高度上添加 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'
  });
});
于 2017-04-10T13:30:53.473 回答