Jcrop 선택 영역 높이가

Question

Jcrop v2.0.0을 사용하여 팝업 이미지를 자릅니다.

그리고 다음은 내 자바 스크립트 코드입니다.

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는 이미지 정도에 높이를 추가로 인해 생각합니다. 내가 지금까지 시도 무엇

은 다음과 같습니다

-> 다시 구조 HTML/제거 부모 요소의 높이 (내 많은 게시물을 제안)

-> boxHeight을 제거해야 : jcrop의 truesize으로 시도> 이벤트 -

Y2 조작, X2와 시도했다> - 만

와 함께 상자를 제공.

Answer 1

해결책을 찾았습니다. 문제는 이미지를 동적으로로드 할 때 문제가 발생하여 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'));