使用JCrop裁剪大圖像時出現問題

Question

此插件適用於小圖像，但在大圖像上不能正確裁剪。

我的.preview_container是250px×153px。我相信我在我的「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

我結束了使用html2canvas捕捉預覽DIV的圖像，並將其保存爲PNG。