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