javascript - 如何使用 Javascript Cropper 修复发布到服务器的图像大小

Question

我正在使用 Cropper https://github.com/fengyuanchen/cropper在内容管理系统中，但我正在努力让它修复裁剪图像的大小。

我想要做的是确保在 Canvas 上绘制任何大小的裁剪框也会导致将裁剪后的图像大小精确地传递到网络服务器 560px X 420px。

我现在的 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 重新缩放？

Answer 1

这种情况似乎总是会发生...一旦我发布了一个问题，我通常会很快自己回答它，尽管我已经花了很长时间试图弄清楚它。

通过添加宽度和高度选项，这似乎有效:-

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