cropper js中的setCropBoxData问题

Question

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

>> c_est = 0.752

除非我们遇到问题，当出于某种原因执行调整大小时，裁剪框会根据图像的大小缩小。

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

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

$('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)});
});

如果我删除上面的“比率”代码问题已解决，但现在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; }); } 由于添加到裁剪图像的黑色背景而无法正常工作。

顺便说一句，使用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});