cropper js 中 setCropBoxData 的问题

Question

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

$('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. 图像右侧的宽度/高度参数不匹配

Answer 1

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

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