javascript - fengyuanchen Cropper - 如果旋转，如何使图像适合 Canvas ？

Question

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

我希望它成为默认值:link

在此处查看问题演示:link

Answer 1

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

这是我想要旋转图像时调用的函数。啊，另外，错位错误也已修复。

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