JCrop not cropping image as intended

Question

A user is allowed to upload a picture on my website. I am resizing the image based on its height and width, this is my JQuery (imgSize is height and imgSize2 is width):

...
...
if (imgSize > 252 && imgSize2 <= 320) {
    var imgwidth = $("#previewSub2").width();
    var imgheight = $("#previewSub2").height();
    $("#previewSub").css("height", "220px");
    $("#previewSub").css("width", "auto");
    $("#previewSub").Jcrop({
        onChange: showPreview,
        onSelect: showPreview,
        aspectRatio: 1,
        setSelect: [0,imgwidth+100,0,0],
        minSize: [90,90],
        addClass: 'jcrop-light' 
     });
}

Notice I've changed the height and width of the img #previewSub. Now here is the rest of my JCrop code:

function showPreview(coords)
{
    $('#x').val(coords.x);
    $('#y').val(coords.y);
    $('#w').val(coords.w);
    $('#h').val(coords.h);

    var rx = 150 / coords.w;
    var ry = 150 / coords.h;
    var imgSize = $("#previewSub").height();
    var imgWidth =  $("#previewSub").width();
    $('#previewSub2').css({
        width: Math.round(rx * imgWidth) + 'px',
        height: Math.round(ry * imgSize) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
 }

When I use php to capture the newly cropped image, the crop is off. It crops off much more than it should. Any way to circumvent this issue? Is the problem due to the fact that I am resizing the img #previewSub?

Answer 1

You should add the true size to the Jcrop settings:

trueSize: [imgwidth, imgheight],