裁剪旋转的图像时,使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旋转后旋转。
我必须通过改变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.
幸运的是,这不难做到,你可以自己做一个替换一个line: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
或者您可以通过网址获取更新的代码: 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屋!