Jcrop issue if image is resized - Jquery

Question

I am using Jquery UI to resize the image. So if is there any image then user can resize the image using the JQuery UI and then I am using JCrop to crop the image. So the problem is when user resizes the image and then crop the image after image resized then for some reason Jcrop picks the original sized image. Is there any way to tell JCrop to pick the resized image dimensions to crop? Please see the attached image.

$('img').Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    setSelect: [100, 100, 50, 50]
});

function showPreview(c) {
    if (parseInt(c.w) > 0) {
        // Show image preview
        var imageObj = $('img')[0];
        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
        cropWidth = c.w;
        cropHeight = c.h;
    }
}

Please check the JsFiddle link http://jsfiddle.net/mpvPC/106/. As you notice that I have out the width and height on image to get it resized if you remove width and height then it works fine

Answer 1

I figured out the solution. I just used trueSize. Please check my code below.

$('image').Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    setSelect: [100, 100, 50, 50],
    trueSize: [originalImageWidth, originalImageHeight] // use Original Image dimensions not resized one
});