cropper js 中的 setCropBoxData 问题

Question

我创建了一个调整裁剪框大小的函数。用户输入高度和宽度，点击 "set" 就完成了。

$('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 并单击 "set"...结果？结果是 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/时也是一样的

点击"Get Crop Box Data"
调整显示结果框中的width/height
点击"Set Crop Box Data"
图像右侧的宽度/高度参数不匹配

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

cropper js 中的 setCropBoxData 问题

Issue with setCropBoxData in cropper js

javascript

jquery

cropper