0

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

我想要做的是确保在画布上绘制任何大小的裁剪框也会导致裁剪图像大小正好为 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 重新缩放它？

4

2 回答 2

3

这似乎总是发生......一旦我发布了一个问题，我通常会在不久之后自己回答它，即使我已经花了很长时间试图弄清楚它。

通过添加宽度和高度选项，这似乎工作： -

$image.cropper('getCroppedCanvas', {'width': 560, 'height': 420}).toBlob(function (blob) {
于 2017-11-22T20:34:52.173 回答
1

可以做到，请查看其文档：

https://github.com/fengyuanchen/cropper#getcroppedcanvasoptions

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

另一件事是您需要根据所需的宽度和高度设置比例。560/420 与 4/3 成正比。设置纵横比：4/3。这会将图像调整为您想要的大小，而不会影响任何东西。

于 2017-11-22T20:46:26.240 回答