Использование предварительного просмотра изображения jcrop в отличие от загруженного изображения

Question

Я использую Jcrop для обрезки загруженных изображений. Кадрирование представляет собой квадратное изображение, но загруженное изображение может иметь любую ориентацию. У меня проблема с панелью предварительного просмотра. Корпус работает просто отлично.

Поэтому, когда я устанавливаю область обрезки, изображение для предварительного просмотра перемещается совсем немного. Когда я обрезаю ближе к нижней части основного изображения, предварительный просмотр становится черным, но если я обрезаю ближе к верхней части основного изображения, предварительный просмотр частично, а затем полностью заполняет. Я думаю, у меня есть проблема с тем, как устанавливается соотношение или интерпретировать.

Вот мой код предварительного просмотра:

function showUpdateCoords(c){
jQuery('form#crop-coords-form #x1').val(c.x);
jQuery('form#crop-coords-form #y1').val(c.y);
jQuery('form#crop-coords-form #x2').val(c.x2);
jQuery('form#crop-coords-form #y2').val(c.y2);
jQuery('form#crop-coords-form #w').val(c.w);
jQuery('form#crop-coords-form #h').val(c.h);

var img_h = jQuery('.jcrop-holder img').attr('height');//main image height
var img_w = jQuery('.jcrop-holder img').attr('width');//main image width
var ratio_x = 100 / c.w;
var ratio_y = 100 / c.h;

if( parseInt(c.w) > 0 ){
    $('#jcrop-preview-target').css({
        width: Math.round(ratio_x * img_w) + 'px', 
        height: Math.round(ratio_y * img_h) + 'px', 
        marginLeft: '-' + Math.round(ratio_x * c.x) + 'px',
        marginTop: '-' + Math.round(ratio_y * c.y) + 'px'
    });
}
}//end showUpdateCoords

Любая помощь очень ценится!