裁剪旋转的图像时，使Jcrop跟踪器不旋转

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

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

怎么了

然后它去了 如何使裁剪选择工具保持直立？

我的HTML：

 <img id="image_canv" src="https://stackoverflow.com/questions/20062754/make-jcrop-tracker-not-rotate-when-cropping-a-rotated-image/">  

我的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); }); 

Answer 1

是的，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 

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

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

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

祝好运！

Answer 2

我跳下了ergoli，但是我没有使用jquery旋转，而是使用了css类：

 .rotate90{ /* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* IE */ -ms-transform: rotate(90deg); /* Opera */ -o-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 

然后我为180和-90制作了类似的类。

我发现只更改mouseAbs函数对我来说更简单

 function mouseAbs(e) //{{{ { switch (options.rotate) { case 90: return [(e.pageY - docOffset[1]), -(e.pageX - docOffset[0] - options.imgHeight)]; break; case 270: return [(e.pageY - docOffset[1]), -(e.pageX - docOffset[0] - options.imgHeight)]; break; case -90: return [-(e.pageY - docOffset[1] - options.imgWidth), (e.pageX - docOffset[0] )]; break; case 270: return [-(e.pageY - docOffset[1] - options.imgWidth), (e.pageX - docOffset[0] )]; break; case 180: return [-(e.pageX - docOffset[0]- options.imgWidth), -(e.pageY - docOffset[1] - options.imgHeight)]; break; case -180: return [-(e.pageX - docOffset[0]- options.imgWidth), -(e.pageY - docOffset[1] - options.imgHeight)]; break; default: return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])]; break; } } 

只需要确保我的.jcrop-holder 在正确的时间有正确的旋转类，并使用旋转和图像尺寸实现jcrop。

 this.image.Jcrop({ rotate: that.angle, imgHeight: that.image.height(), imgWidth: that.image.width(), onSelect: function(c){ that.x1 = cx; that.x2 = c.x2; that.y1 = cy; that.y2 = c.y2; that.w = cw; that.h = ch; } }); 

这不是一个特别优雅的解决方案，但它目前正在工作。

Answer 3

我最近也试过实现这个，但是无法让其他答案中提到的方法按照我想要的方式工作。 特别是，我在旋转时调整作物的大小时遇到​​了麻烦。 我考虑更新Jcrop以解决问题，但决定替代方案会更容易。

我选择使用JavaScript加载图像库将图像旋转到Jcrop之外，然后裁剪旋转的图像。 其中的loadImage方法采用可用于执行旋转的方向选项。 根据你想要做的事情，你可能需要在之后转换生成的作物，但我发现这比弄乱Jcrop的内部更容易。

Answer 4

我使用Dan的方法作为跳跃点，但我没有足够的声誉来评论Dan Baker的答案，所以我提交了另一个答案。 他的mouseAbsfunction根本不适用于我，我修改如下：

 function mouseAbs(e) { switch (options.rotate) { case 90: return [(e.pageY - docOffset[1]), -(e.pageX - docOffset[0])]; case 180: return [-(e.pageX - docOffset[0]), -(e.pageY - docOffset[1])]; case 270: return [-(e.pageY - docOffset[1]), (e.pageX - docOffset[0])]; default: return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])]; } } 

其他一切都是一样的。 在初始化时将当前旋转传递给Jcrop对象，并将Dan的旋转css类应用于.jcrop-holder元素。

Answer 5

请看看这个。 这工作得非常好。 感谢ergoli。 我在ergoli更新的JCrop文件的顶部使用了我的逻辑。 https://github.com/prijuly2000/Image-RotateAndCrop-app

编辑添加JS代码：

 var jcrop_api; var angle = 0; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; function rotateLeft() { angle -= 90; $(".jcrop-holder").rotate(angle); jcrop_api.setOptions({ rotate: angle < 0 ? 360 + angle : angle }); if (angle <= -360) angle = 0; } function rotateRight() { angle += 90; $(".jcrop-holder").rotate(angle); jcrop_api.setOptions({ rotate: angle }); if (angle >= 360) angle = 0; } function updateCoords(c) { $('#x').val(cx); $('#y').val(cy); $('#w').val(cw); $('#h').val(ch); $('#d').val(angle); }; function showImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $("#image").attr("src", e.target.result).Jcrop({ onChange: updateCoords, onSelect: updateCoords, boxWidth: 450, boxHeight: 400 }, function() { jcrop_api = this; }); }; reader.readAsDataURL(input.files[0]); } }