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 픽셀을 추가해야했습니다. 어쩌면 사각 캔버스가 이미지 주위에 추가 높이와 너비를 추가할까요?

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