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

Question

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

Answer 1

是的，JCrop 有 JQuery rotate 旋转后选择方向错误的问题。 我不得不通过更改 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 rotate，而是 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]);
    }
}