如何使用Javascript裁剪器修复发布到服务器的图像大小

我在一个内容管理系统中使用了Cropper，但我很难让它修复被裁剪图像的大小

我想做的是确保在画布上绘制的裁剪框的大小也会导致经过裁剪的图像大小正好为560px 420px，并传递到Web服务器

我目前拥有的iQuery代码是：-

$("#accept_crop").click(function() {

        var $image = $("#image");
        var cropper = $image.cropper();
        var baseURL = window.location.protocol+'//'+window.location.host;
        var pho_id = $("input[name=pho_id]").val();
        var mem_id = $("input[name=mem_id]").val();
        var photopath = $("input[name=photopath]").val();
        $image.cropper('getCroppedCanvas').toBlob(function (blob) {
                var formData = new FormData();
                formData.append('croppedImage', blob);
                formData.append('pho_id', pho_id);
                formData.append('mem_id', mem_id);
                formData.append('photopath', photopath);
                $.ajax(baseURL+'/path', {
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                      console.log('Upload success');
                    },
                    error: function () {
                      console.log('Upload error');
                    }
                });
        }, 'image/jpeg', 0.8);      

});

---

裁剪后的图像经过精细处理，但始终会根据绘制的裁剪框的大小产生可变大小。是否有任何方法可以在不考虑裁剪框的情况下固定客户端站点的大小，以便在不使用PHP重新缩放的情况下放大或缩小图像？

这种情况似乎总是发生。。。一旦我发布了一个问题，我通常会很快自己回答，即使我已经花了很多时间试图弄明白它

通过添加宽度和高度选项，这似乎是可行的：-

$image.cropper('getCroppedCanvas', {'width': 560, 'height': 420}).toBlob(function (blob) {

---

这似乎总是发生。。。一旦我发布了一个问题，我通常会很快自己回答，即使我已经花了很多时间试图弄明白它

通过添加宽度和高度选项，这似乎是可行的：-

$image.cropper('getCroppedCanvas', {'width': 560, 'height': 420}).toBlob(function (blob) {

---

如果可以，请检查其文档：

您可以设置输出画布的目标宽度和高度

---

另一件事是你需要根据你需要的宽度和高度设置比例。560/420与4/3成比例。设置aspectRatio:4/3。这将在不影响任何内容的情况下将图像调整为所需大小。

如果可以，请查看其文档：

您可以设置输出画布的目标宽度和高度

---

另一件事是你需要根据你需要的宽度和高度设置比例。560/420与4/3成比例。设置aspectRatio:4/3。这将在不影响任何内容的情况下将图像调整为所需大小。

我正要发布：）很高兴看到你自己做了。我没有看到你的答案。是的，这就是他们在文档中提到的。谢谢@Andrew Simeou你为我们节省了很多时间。我正要发布：）很高兴看到你自己做了。我没有看到你的答案。是的，这就是他们在文档中提到的。谢谢@Andrew Simeou，你为我们节省了很多时间。