fengyuanchen Cropper - 如果旋转后如何将图像放入画布中？

Question

我浏览了 fengyuanchen 的 cropper 文档。如果旋转，我希望图像默认适合画布。但我找不到实现这一目标的方法。知道如何实现此功能吗？

我希望它是默认的：link

在此处查看问题演示：link

Answer 1

我已修复此行为，但出于我的特殊需要。我只需要一个旋转按钮，它可以将图像旋转 90°。出于其他目的，您可能会扩展/更改我的修复。 它通过动态更改裁剪框尺寸在“严格”模式下工作。

当我想旋转图像时，这里调用了我的函数。啊，另外还修复了错位错误。

var $image;

function initCropper() {
$image = $('.imageUploadPreviewWrap > img').cropper({
  autoCrop : true,
  strict: true,
  background: true,
  autoCropArea: 1,
  crop: function(e) {
  }
});
}

function rotateImage() {    
    //get data
    var data = $image.cropper('getCropBoxData');
    var contData = $image.cropper('getContainerData');
    var imageData = $image.cropper('getImageData');
    //set data of cropbox to avoid unwanted behavior due to strict mode
    data.width = 2;
    data.height = 2;
    data.top = 0;
    var leftNew = (contData.width / 2) - 1;
    data.left = leftNew;
    $image.cropper('setCropBoxData',data);
    //rotate
    $image.cropper('rotate', 90);
    //get canvas data
    var canvData = $image.cropper('getCanvasData');
    //calculate new height and width based on the container dimensions
    var heightOld = canvData.height;
    var heightNew = contData.height;
    var koef = heightNew / heightOld;
    var widthNew = canvData.width * koef;
    canvData.height = heightNew;
    canvData.width = widthNew;
    canvData.top = 0;
    if (canvData.width >= contData.width) {
      canvData.left = 0;
    }
    else {
      canvData.left = (contData.width - canvData.width) / 2;
    }
    $image.cropper('setCanvasData', canvData);
    //and now set cropper "back" to full crop
    data.left = 0;
    data.top = 0;
    data.width = canvData.width;
    data.height = canvData.height;
    $image.cropper('setCropBoxData',data);
  } 

Answer 2

我希望完全修复这个问题。我已将选项添加或更改为 0 (viewMode: 0,)。现在它运行良好。

cropper = new Cropper(image, {
            dragMode: 'none',
            viewMode: 0,
            width: 400,
            height: 500,
            zoomable: true,
            rotatable: true,
            crop: function(e) {
            }
        });

document.getElementById('rotateImg').addEventListener('click', function () {
        cropper.rotate(90);
    });

Answer 3

var photoToEdit = $('.photo_container img');
$( photoToEdit ).cropper({
   autoCrop : true,
   crop: function(e) {}
});
$("#rotate_left_btn").click( function () {
   $( photoToEdit ).cropper('rotate', -90);
   var containerHeightFactor = $(".photo_container").height() / $( photoToEdit).cropper('getCanvasData').height;
   if ( containerHeightFactor < 1 ) { // if canvas height is greater than the photo container height, then scale (on both x and y
      // axes to maintain aspect ratio) to make canvas height fit container height
      $( photoToEdit).cropper('scale', containerHeightFactor, containerHeightFactor);
   } else if ( $( photoToEdit).cropper('getData').scaleX != 1 || $( photoToEdit).cropper('getData').scaleY != 1 ) { // if canvas height
      // is NOT greater than container height but image is already scaled, then revert the scaling cuz the current rotation will bring
      // the image back to its original orientation (landscape/portrait)
      $( photoToEdit).cropper('scale', 1, 1);
   }
}

Answer 4

不是对这个问题的直接回答……但我敢打赌，许多使用此插件的人会发现这很有帮助..

在获取@AlexanderZ 代码旋转图像后制作。

所以... 如果你们想要旋转或翻转已定义裁剪框的图像，并且如果您希望该裁剪框随图像一起旋转或翻转 ...使用这些功能：

function flipImage(r, data) {

    var old_cbox = $image.cropper('getCropBoxData');
    var new_cbox = $image.cropper('getCropBoxData');
    var canv     = $image.cropper('getCanvasData');

    if (data.method == "scaleX") {
        if (old_cbox.left == canv.left) {
            new_cbox.left = canv.left + canv.width - old_cbox.width;
        } else {
            new_cbox.left = 2 * canv.left + canv.width - old_cbox.left - old_cbox.width;
        }

    } else {
        new_cbox.top = canv.height - old_cbox.top - old_cbox.height;
    }

    $image.cropper('setCropBoxData', new_cbox);

    /* BUG: When rotated to a perpendicular position of the original position , the user perceived axis are now inverted. 
    Try it yourself: GO to the demo page, rotate 90 degrees then try to flip X axis, you'll notice the image flippped vertically ... but still ... it fliped in relation to its original axis*/

    if ( r == 90 || r == 270 || r == -90 || r == -270 ) {

        if ( data.method == "scaleX") {

            $image.cropper("scaleY", data.option);

        } else {

            $image.cropper("scaleX", data.option);

        }

    } else {

        $image.cropper(data.method, data.option);

    }

    $image.cropper(data.method, data.option);

}





function rotateImage(rotate) {

    /* var img = $image.cropper('getImageData'); */

    var old_cbox = $image.cropper('getCropBoxData');
    var new_cbox = $image.cropper('getCropBoxData');
    var old_canv = $image.cropper('getCanvasData');
    var old_cont = $image.cropper('getContainerData');

    $image.cropper('rotate', rotate);

    var new_canv = $image.cropper('getCanvasData');

    //calculate new height and width based on the container dimensions
    var heightOld = new_canv.height;
    var widthOld = new_canv.width;
    var heightNew = old_cont.height;
    var racio = heightNew / heightOld;
    var widthNew = new_canv.width * racio;
    new_canv.height = Math.round(heightNew);
    new_canv.width = Math.round(widthNew);
    new_canv.top = 0;

    if (new_canv.width >= old_cont.width) {
        new_canv.left = 0;
    } else {
        new_canv.left = Math.round((old_cont.width - new_canv.width) / 2);
    }

    $image.cropper('setCanvasData', new_canv);

    if (rotate == 90) {
        new_cbox.height  = racio * old_cbox.width;
        new_cbox.width   = racio * old_cbox.height;

        new_cbox.top     = new_canv.top + racio * (old_cbox.left - old_canv.left);
        new_cbox.left    = new_canv.left + racio * (old_canv.height - old_cbox.height - old_cbox.top);
    }

    new_cbox.width  = Math.round(new_cbox.width);
    new_cbox.height = Math.round(new_cbox.height);
    new_cbox.top    = Math.round(new_cbox.top);
    new_cbox.left   = Math.round(new_cbox.left);

    $image.cropper('setCropBoxData', new_cbox);

}

Answer 5

这是 AlexanderZ 提供的我的扩展代码，以避免剪切比容器更宽的图像:)

var contData = $image.cropper('getContainerData');

$image.cropper('setCropBoxData',{
    width: 2, height: 2, top: (contData.height/ 2) - 1, left: (contData.width / 2) - 1
});

$image.cropper('rotate', 90);

var canvData = $image.cropper('getCanvasData');
var newWidth = canvData.width * (contData.height / canvData.height);

if (newWidth >= contData.width) {
    var newHeight = canvData.height * (contData.width / canvData.width);
    var newCanvData = {
        height: newHeight,
        width: contData.width,
        top: (contData.height - newHeight) / 2,
        left: 0
    };
} else {
    var newCanvData = {
        height: contData.height,
        width: newWidth,
        top: 0,
        left: (contData.width - newWidth) / 2
    };
}

$image.cropper('setCanvasData', newCanvData);
$image.cropper('setCropBoxData', newCanvData);