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

I jumped off of ergoli, but instead of jquery rotate I used css classes like:

.rotate90{
    /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);

  /* Opera */
  -o-transform: rotate(90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Then I made similar classes for 180 and -90.

I found it was simpler for me to just alter the mouseAbs function

function mouseAbs(e) //{{{
    {
      switch (options.rotate) {
          case 90:
            return [(e.pageY - docOffset[1]), -(e.pageX - docOffset[0] - options.imgHeight)];
            break;
          case 270:
            return [(e.pageY - docOffset[1]), -(e.pageX - docOffset[0] - options.imgHeight)];
            break;
          case -90:
            return [-(e.pageY - docOffset[1] - options.imgWidth), (e.pageX - docOffset[0] )];
            break;
          case 270:
            return [-(e.pageY - docOffset[1] - options.imgWidth), (e.pageX - docOffset[0] )];
            break;
          case 180:
            return [-(e.pageX - docOffset[0]- options.imgWidth), -(e.pageY - docOffset[1] - options.imgHeight)];
            break;
          case -180:
            return [-(e.pageX - docOffset[0]- options.imgWidth), -(e.pageY - docOffset[1] - options.imgHeight)];
            break;
          default:
            return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])];
            break;
          }

    }

Just had to make sure my .jcrop-holder had the right rotate class at the right time and instanciate jcrop with the rotate and image dimensions.

this.image.Jcrop({
    rotate: that.angle,
    imgHeight: that.image.height(),
    imgWidth: that.image.width(),
    onSelect: function(c){
        that.x1 = c.x;
        that.x2 = c.x2;
        that.y1 = c.y;
        that.y2 = c.y2;
        that.w  = c.w;
        that.h  = c.h;
    }
});

This is not a particularly elegant solution, but its working currently.