Make Jcrop tracker not rotate when cropping a rotated image

Question

I\'m trying to crop an image using Jcrop, but when I use jqueryrotate on the image, something weird happens.

I rotate the image 90 degress then I activate the JCrop,

Answer 1

Please take look at this. This is working perfectly fine. Thanks to ergoli. I used my logic on the top of ergoli's updated JCrop file. https://github.com/prijuly2000/Image-RotateAndCrop-app

Editted to add the JS code :

var jcrop_api;
var angle = 0;

function checkCoords() {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};

function rotateLeft() {
    angle -= 90;
    $(".jcrop-holder").rotate(angle);
    jcrop_api.setOptions({
        rotate: angle < 0 ? 360 + angle : angle
    });
    if (angle <= -360) angle = 0;
}

function rotateRight() {
    angle += 90;
    $(".jcrop-holder").rotate(angle);
    jcrop_api.setOptions({
        rotate: angle
    });
    if (angle >= 360) angle = 0;
}

function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w); 
    $('#h').val(c.h);
    $('#d').val(angle);
};

function showImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $("#image").attr("src", e.target.result).Jcrop({
                onChange: updateCoords,
                onSelect: updateCoords,
                boxWidth: 450,
                boxHeight: 400
            }, function() {
                jcrop_api = this;
            });
        };
        reader.readAsDataURL(input.files[0]);
    }
}