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

如果我删除上面的“ratio”代码，问题就解决了，但是现在 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});