gpt4 book ai didi

jquery - 使 Jcrop 跟踪器在裁剪旋转图像时不旋转

转载 作者:行者123 更新时间:2023-12-03 22:32:33 25 4
gpt4 key购买 nike

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

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

发生了什么 enter image description here

然后就可以了 enter image description here如何使裁剪选择工具保持直立?

我的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

祝你好运!

关于jquery - 使 Jcrop 跟踪器在裁剪旋转图像时不旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20062754/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com