JCrop으로 큰 이미지 자르기와 관련된 문제

Question

이 플러그인은 작은 이미지에서는 잘 작동하지만 큰 이미지에서는 제대로 자르지 않습니다.

내 .preview_container는 250x153 픽셀입니다. 나는 "updateCoords"함수에서 실제 이미지 크기에 기반을 둔 좌표를 얻지 못할 수 있으므로 뭔가 잘못하고 있다고 생각합니다.

자르기를 할 때 미리보기에서 모든 것이 잘 보입니다. 잘못된 자르기로 이미지를 저장하는 것뿐입니다.

미리 감사드립니다.

JS는 :

jQuery(function($){ 

// Create variables (in this scope) to hold the API and image size 
var jcrop_api, 
    boundx, 
    boundy, 

    // Grab some information about the preview pane 
    $preview = $('#preview-pane'), 
    $pcnt = $('#preview-pane .preview-container'), 
    $pimg = $('#preview-pane .preview-container img'), 

    xsize = $pcnt.width(), 
    ysize = $pcnt.height(); 

console.log('init',[xsize,ysize]); 


    $('#cropbox').Jcrop({ 
    onChange: updatePreview, 
    onSelect: updateCoords, 
    aspectRatio: xsize/ysize 
},function(){ 
    // Use the API to get the real image size 
    var bounds = this.getBounds(); 
    boundx = bounds[0]; 
    boundy = bounds[1]; 
    // Store the API in the jcrop_api variable 
    jcrop_api = this; 

    // Move the preview into the jcrop container for css positioning 
    $preview.appendTo(jcrop_api.ui.holder); 
}); 


function updatePreview(c) 
    { 
     if (parseInt(c.w) > 0) 
     { 
     var rx = xsize/c.w; 
     var ry = ysize/c.h; 

     console.log('update',[c.x,c.y]); 

     $pimg.css({ 
      width: Math.round(rx * boundx) + 'px', 
      height: Math.round(ry * boundy) + 'px', 
      marginLeft: '-' + Math.round(rx * c.x) + 'px', 
      marginTop: '-' + Math.round(ry * c.y) + 'px' 
     }); 
     } 
    }; 


    function updateCoords(c) 
    { 
    $('#x').val(c.x); 
    $('#y').val(c.y); 
    $('#w').val(c.w); 
    $('#h').val(c.h); 
    }; 

    function checkCoords() 
    { 
    if (parseInt($('#w').val())) return true; 
    alert('Please select a crop region then press submit.'); 
    return false; 
    };  

}); 

Answer 1

나는 미리 DIV의 이미지를 캡처하고 PNG로 저장 html2canvas를 사용하여 끝났다.