Question

我在内容管理系统中使用了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重新缩放它？

Answer 1

这似乎总是发生......一旦我发布了一个问题，我很快就会自己回答这个问题，尽管我已经花了很长时间试图解决这个问题。

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

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

Answer 2

可以这样做，查看其文档：

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

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

其他方面是您需要根据所需的宽度和高度设置比例比例。 560/420与4/3成比例。设置aspectRatio：4/3。这样可以将图像调整到所需大小，而不会影响任何内容。

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

2 个答案: