jquery – 裁剪旋转的图像时,使Jcrop跟踪器不旋转

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

我将图像旋转90度然后激活JCrop,JCrop不跟随旋转的图像,所以我也旋转了Jcrop-holder.生成的图像没问题,但是当我选择要裁剪的部分时,我注意到我的跟踪器也已旋转.当我将它向上拖动时,它向右移动,当我向左拖动时,它向下移动.

怎么了

然后它去了

如何使裁剪选择工具保持直立？

我的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旋转旋转后存在选择方向错误的问题.
我必须通过更改JCrop的js代码来解决它,以支持旋转.

幸运的是,它不难做到,你可以通过替换一行来自己完成：136到子代码：

//========= 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

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

小心！
你应该在每次旋转点击后转移旋转选项：

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

祝你好运！

原文地址：https://www.jb51.cc/jquery/180663.html