裁剪旋转图像时使 Jcrop 跟踪器不旋转 [英] Make Jcrop tracker not rotate when cropping a rotated image

问题描述

我正在尝试使用 Jcrop 裁剪图像，但是当我在图像上使用 jqueryrotate 时，会发生一些奇怪的事情.

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

我将图像旋转 90 度然后激活 JCrop，JCrop 不跟随旋转的图像，所以我也旋转了 Jcrop-holder.生成的图像还可以，但是当我选择要裁剪的部分时，我注意到我的跟踪器也旋转了.往上拖是往右，往左拖是往下.

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.

会发生什么

然后就可以了如何让作物选择工具保持直立?

Then it goes How do I make the crop selection tool stay upright?

我的html:

    <div class="img-canvas" style="background-color:#cccccc;" >
            <img id="image_canv" src="<?php echo $imagesource;?>"> 
        </div> 

我的 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({
    onSelect: showCoords2,
    onChange: showCoords2,
    setSelect:   [ 0, 100, 50, 50 ]
    });

JcropAPI = $('#image_canv').data('Jcrop');
JcropAPI.enable();

var h2 = $('.jcrop-holder').height();
var w2 = $('.jcrop-holder').width();

if(h2  < 630)
{
var tempp = (630 - h2)/2;
$('.jcrop-holder').css("margin-top",tempp);
}
if(w2  < 630)
{
var tempp = (630 - w2)/2;
$('.jcrop-holder').css("margin-left",tempp);
} 

$('.jcrop-holder').rotate(value);
$("#image_canv").rotate(value);
});

推荐答案

是的，JCrop 有 JQuery rotate 旋转后选择方向错误的问题.我不得不通过更改 JCrop 的 js 代码来支持旋转来解决它.

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.

还好不难做，你可以自己做，把一行:136换成子代码:

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

或者你可以通过url获取更新的代码:https://github.com/ergoli/Jcrop/tree/master/js

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

祝你好运！

这篇关于裁剪旋转图像时使 Jcrop 跟踪器不旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！