Почему Jcrop-трекер не показывает правильное положение?

В моем приложении пользователи могут сделать снимок или загрузить изображение со своего устройства. Это изображение является источником для функции Jcrop. Эта функция работает корректно, так как в ней правильно "обрезается". Однако jcrop-трекер, который предварительно просматривает то, что вы обрезаете, не показывает его правильное положение на изображении.

Пожалуйста, посмотрите этот пример:

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

Я предполагаю, что это связано с тем, что 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());

});

});