2017-10-03 24 views
0

私はJcrop v2.0.0をポップアップで画像を切り取るために使用しました。Jcrop選択領域の高さが

と以下は私の同じJavascriptコードです。

var imageCropWidth = 0; 
var imageCropHeight = 0; 
var cropPointX = 0; 
var cropPointY = 0; 

$('#CropImage').attr('src', '/Users/3/images/Umbraco.jpg'); 
$(document).ready(function() { 
     initCrop(); 
    }); 

    function initCrop() { 
     $('#CropImage').Jcrop({ 
      onSelect: setCoordsAndImgSize, 
      boxWidth: 260, 
      //boxHeight: 260, 
     }); 
    } 

function setCoordsAndImgSize(e) { 
imageCropWidth = e.w; 
     imageCropHeight = e.h; 

     cropPointX = e.x; 
     cropPointY = e.y; 
} 

は今、私は正確にXを得るのに苦労していますboxWidthを使用した後、選択されたトリミング領域のy座標は、私はそれがJcropイメージかそこらまでの高さを追加することによるものだと思います。私が今まで試してみました何

enter image description here

は次のとおりです。

- >再構成HTML /削除親要素の高さ(私の多くのポストを示唆したように)

- > boxHeightを削除します: X2、Y2操作

で試してみる> - - とだけ

と箱を与えられた>イベントjcropのtruesizeにしてみてください。

答えて

0

解決策が見つかりました。問題は、画像を動的にロードするときに発生したため、jcropは最後の画像のサイズをとっていました。

と同じ

はsetImage

setImage(SelectedImage.attr( 'SRC'))によって管理することができます。

したがって、JSコードになります。画像の変化に

var jcrop_api; 

function initCrop() { 
     var ratioW = ($('#CropImage')[0].naturalWidth); 
     var ratioH = ($('#CropImage')[0].naturalHeight); 
     $('#CropImage').Jcrop({ 
      onSelect: setCoordsAndImgSize, 
      boxWidth: 260, 
      boxHeight: 260, 
      setSelect: [0, 0, ratioW, ratioH] 
     }, function() { 
      jcrop_api = this; 
     }); 
    } 

//コール

jcrop_api.setImage(SelectedImage.attr('src')); 
関連する問題