Javascript Jcrop and Rotate

Question

I am trying to rotate an image on which I use Jcrop. (The reason is because Iphone pictures taken directly from camera do not display using exif informations)

So basically using this thread I get the exif informations and then I tried several way to rotate the image and finished using this one but none are working. Even applying a rotation directly in the debugger won't work. My best guess is that Jcrop add divs everywhere around the image making the css not valid anymore but then I don't know how I could find a solution for that as I'm beginning with js/html/css.

Here follows my html:

<form method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="imageInput" accept="image/*" capture="camera" />  
  <div id="im_container">
    <img id="image" src="#" alt="My Image" />
  </div>
</form>

And there is my js script:

var imWidth = 0;
var imHeight = 0;

function readURL(input) {
  if (input.files && input.files[0]) {
      getOrientation(input.files[0], function(orientation) {

      console.log('orientation ' + orientation);

      var reader = new FileReader();
      reader.onload = function(e) {
        console.log("Reader onload");

        var image = new Image();
        image.src = e.target.result;
        image.onload = function() {
          console.log("Image onload");
          imWidth = this.width;
          imHeight = this.height;

          $('#image').attr('src', this.src);
          console.log("Width: " + imWidth + " and Height: " + imHeight);
          var initx = parseInt(imWidth/2, 10);
          var inity = parseInt(imHeight/2, 10);
          var ratio = 1;
          var ratioInv = 1;
          if (imWidth <= imHeight) {
            console.log("Width < Height");
            $('#image').Jcrop({
              aspectRatio: ratioInv,
              onSelect: updateCoords,
              trueSize: [imWidth, imHeight],
              setSelect: [0, 0, initx, inity]
            });
          } else {
            console.log("Width > Height");
            $('#image').Jcrop({
              aspectRatio: ratio,
              onSelect: updateCoords,
              trueSize: [imWidth, imHeight],
              setSelect: [0, 0, initx, inity]
            });
          }

          // -1 because I am testing with an image having no exif orientation details
          if (orientation == -1) {
            // Turn image ?
            console.log("rotate image");
            img = document.getElementById('im_container');
            angle = 90;
            img.className = "rotate" + angle;
          }
        }
      }

      reader.readAsDataURL(input.files[0]);
      });
  }
}

$("#imageInput").change(function() {
  readURL(this);
});

getOrientation() is coming from this thread mentionned earlier.

Edit: My guess came because the size limitation imposed by the css is not respected at all by the image. And when inspecting the source on the webpage I saw a lot of div containers between the image and my initial container.