Why does the Jcrop-tracker not show it's correct position?

Question

In my app users can take a picture or upload an image from their device. This image is the source for a Jcrop function. This function works correctly, as in it 'crops' correctly. However the jcrop-tracker that previews what you are cropping doesn't show it's correct position on the image.

Please see this example:

When moving the tracker to the top of the image, it'll show almost the entire image. When moving further down, it'll show nothing at all. How is this possible?

My guess is this is because of jCrop having issues with downscaled pictures (for example pictures taken from device camera).

I use CSS to downscale the image so it can fit on on device screen:

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

Is there any way to prevent this?

Here's my code:

$(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

Gentleman, I'm sorry for the delay in responding to you. Thank you everyone who replied on my question.

I've had a very busy week so I had little time to work on this project. Today I've picked it up again and I first tried to solve this problem myself again.

Fortunately, this time it worked. I ended up using Jcrop's box sizing method. I believe I had tried it before, but this time it works flawlessly. So problem solved :)

Answer 2

Unfortunate this did not work for me but I had a different issue that I hope will help anyone else who has this this issue.

Mine was due to a css styling conflict.

 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 }