编辑添加JS代码：

Question

我正在尝试使用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);
});

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

或者您可以通过网址获取更新的代码：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 = c.x;
        that.x2 = c.x2;
        that.y1 = c.y;
        that.y2 = c.y2;
        that.w  = c.w;
        that.h  = c.h;
    }
});

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

Answer 3

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

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

Answer 4

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

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(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w); 
    $('#h').val(c.h);
    $('#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]);
    }
}

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

5 个答案:

编辑添加JS代码：