fengyuanchen Cropper - How to Fit Image into Canvas If Rotated?

Question

I gone through documentation of cropper by fengyuanchen. I want the image to be fit by default into canvas if rotated. But I couldnt find a way to achieve this. Any idea how to achieve this functionality?

I want it to be like this to be default: link

Check issue demo here: link

Answer 1

I fixed this behavior but for my special needs. I just needed one rotate button which rotates an image in 90° steps. For other purposes you might extend/change my fix. It works in "strict" mode by dynamically change the cropbox dimensions.

Here my function which is called, when I want to rotate an image. Ah and additionally the misplacement bug has also been fixed.

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

This is my extended code provided by AlexanderZ to avoid cuttong wider images than container :)

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);