Jcrop-tracker가 올바른 위치를 표시하지 않는 이유는 무엇입니까?

Question

내 앱 사용자는 자신의 기기에서 사진을 찍거나 이미지를 업로드 할 수 있습니다. 이 이미지는 Jcrop 함수의 소스입니다. 이 기능은 '작물'처럼 올바르게 작동합니다. 그러나 jcrop-tracker는 자르기를 미리 보았지만 이미지에서 정확한 위치를 나타내지 않습니다.

이 예제를 참조하십시오

이미지의 상단에 추적기를 이동, 거의 전체 이미지를 보여 드리겠습니다. 더 아래로 움직이면 아무 것도 보여주지 않을 것입니다. 이것이 어떻게 가능한지?

내 생각 엔 jCrop이 축소 된 사진 (예 : 카메라 카메라에서 찍은 사진)에 문제가 있기 때문입니다. 나는 그것이 장치 화면에 들어갈 수 있도록 CSS 이미지를 다운 스케일을 사용

:

#imgContainer { 
    max-width: 100%; 
    max-height: 100%; 
} 
#imgContainer img { 
    max-width: 100%; 
    max-height: 100%; 
} 

는이 문제를 방지 할 수있는 방법이 있습니까?

여기 내 코드입니다 :

$(window).load(function() { 

var jcrop_api, boundx, boundy; 

function updatePreview(c) { // croping image preview 
    if (parseInt(c.w) > 0) { 
     var rx = 220/c.w, ry = 220/c.h; 
    } 
} 
function showCoords(c) { // show all coords 
    $('#x').val(c.x); 
    $('#y').val(c.y); 
    $('#x2').val(c.x2); 
    $('#y2').val(c.y2); 
    $('#w').val(c.w); 
    $('#h').val(c.h); 
} 

$('#cropImage').Jcrop({ 
    onChange: updatePreview, 
    onSelect: showCoords, 
    bgFade: true, 
    bgOpacity: .8, 
    aspectRatio: 1, 
    maxSize: [ 150, 150 ], 
    boxWidth: 284, 
    boxHeight: 382 
},function(){ 
    jcrop_api = this; 
}); 
var canvas = document.getElementById("canvasresult"); 
$("#m1-cropScreen-cropIt").on("click", function(){ 

    var context = canvas.getContext("2d"); 
    var img = document.getElementById("cropImage"), 
     $img = $(img), 
     imgW = img.naturalWidth, 
     imgH = img.naturalHeight; 

    console.log($img.width()); 
    console.log($img.height()); 

    var ratioY = imgH/$img.height(), 
     ratioX = imgW/$img.width(); 

    var getX = $('#x').val() * ratioX, 
     getY = $('#y').val() * ratioY, 
     getWidth = $('#w').val() * ratioX, 
     getHeight = $('#h').val() * ratioY; 

    context.drawImage(img,getX,getY,getWidth,getHeight,0,0,150,150); 

    $('#cropResult').attr('src', canvas.toDataURL()); 

}); 

}); 

Answer 1

신사, 당신에 응답 지연 미안 해요. 내 질문에 답한 모든 분들께 감사드립니다.

저는이 프로젝트를 진행할 시간이 거의 없었기 때문에 매우 바쁜 한 주였습니다. 오늘 나는 그것을 다시 집어 들었고 나는이 문제를 다시 스스로 해결하려고 애썼다.

다행히도 이번에는 효과가있었습니다. 나는 Jcrop의 box sizing method을 사용하여 끝내었다. 나는 전에 그것을 시도했다고 믿지만 이번에는 완벽하게 작동합니다. 문제가 해결되었으므로 :)

Answer 2

불행히도이 기능은 저에게는 효과가 없었지만이 문제가있는 다른 사용자에게 도움이되는 다른 문제가있었습니다.

광산은 CSS 스타일링 충돌로 인한 것입니다.

From a 3rd party style sheet 
img { max-width: 100% } 

    My Style Sheet -- adding this fixed it 
.jcrop-holder img, img.jcrop-preview { max-width: none !important }