1

我创建了一个调整裁剪框大小的函数。用户输入高度和宽度，点击“设置”，工作就完成了。

$('body').on('click', '#cropImageModal .set_box_size', function () { 
    var width = $(this).parents('.panel-body').find('.width').val();
    var height = $(this).parents('.panel-body').find('.height').val();
    document.getElementById('imageToCrop').cropper.setCropBoxData({width: parseInt(width), height: parseInt(height)});
});

除了我们有一个问题，即由于某种原因执行调整大小时，裁剪框会根据图像的大小缩小。

即我有一个 700x385 的图像，我将框设置为 700x300，然后单击“设置”...结果？结果是 510x219

我已经缩小到cropperJS中的问题，它与第2662-2667行的代码有关：

if (self.ready && self.cropped) {
  data = {
    x: cropBoxData.left - canvasData.left,
    y: cropBoxData.top - canvasData.top,
    width: cropBoxData.width,
    height: cropBoxData.height
  };

  // issue is below
  ratio = imageData.width / imageData.naturalWidth;

  each(data, function (n, i) {
    n /= ratio;
    data[i] = rounded ? Math.round(n) : n;
  });
}

如果我删除上面的“比率”代码，问题就解决了，但getCroppedCanvas由于在裁剪后的图像中添加了黑色背景，现在无法正常工作。

顺便说一句，使用http://fengyuanchen.github.io/cropperjs/时可以看到同样的情况，如果您要：

  1. 点击“获取裁剪框数据”
  2. 调整显示结果的框中的宽度/高度
  3. 单击“设置裁剪框数据”
  4. 图片右侧的宽度/高度参数不匹配

在此处输入图像描述

4

1 回答 1

4

解决方案是计算出比率，然后使用计算出的比率执行调整后的宽度和高度的计算：

var width = parseInt($(this).parents('.panel-body').find('.width').val());
var height = parseInt($(this).parents('.panel-body').find('.height').val());

var ratio = document.getElementById('imageToCrop').cropper.imageData.width /  document.getElementById('imageToCrop').cropper.imageData.naturalWidth; 

document.getElementById('imageToCrop').cropper.setCropBoxData({width: width*ratio, height: height*ratio});
于 2018-05-24T09:32:40.073 回答