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, the JCrop does not follow the image rotated, so I also rotate the Jcrop-holder. The resulting image is ok, but when I select a section to crop, I have noticed that my tracker is also rotated. When I drag it up, it goes right, when I drag it left, it goes down. What happens Then it goes How do I make the crop selection tool stay upright? My html: ```

``` My Jquery: ``` $('#rotatephoto').click(function () { value += 90; JcropAPI = $('#image_canv').data('Jcrop'); if(JcropAPI != null) { JcropAPI.destroy(); } var h = $('.img-canvas').height(); var w = $('.img-canvas').width(); $('.img-canvas').css("position","fixed"); $('.img-canvas').css("width",w); $('.img-canvas').css("height",h); $('#image_canv').Jcrop({…

Accepted Answer

Yes, the JCrop has the problem of selection direction error after rotated by JQuery rotate. I had to resolve it by change the JCrop's js code to support rotate.

Fortunatly, it's not hard to do, you can do it yourself by replace one line: 136 to sub codes:

```
    //========= begin replace origin line 136 for rotate
    var x = pos[0] - lloc[0];
    var y = pos[1] - lloc[1];
    var rotate = options.rotate || 0;
    var angle = (rotate / 90) % 4;
    if (angle == 1) {
      var temp = x;
      x = y;
      y = - temp;
    } else if (angle == 2) {
      x = -x;
      y = -y;
    } else if (angle == 3) {
      var temp = x;
      x = -y;
      y = temp;
    }
    Coords.moveOffset([x, y]);
    //========= end replace origin line 136 for rotate
```

or you can get the updated code by url: https://github.com/ergoli/Jcrop/tree/master/js

be careful! you should transfer the rotate option after each rotate click:

```
jCropApi.setoptions({rotate : 90});  //rotate 90
```

good luck!

Make Jcrop tracker not rotate when cropping a rotated image

Solution

Problem