0

コンテンツ管理システムでCropper https://github.com/fengyuanchen/cropperを使用していますが、トリミングされた画像のサイズを修正するのに苦労しています。

私がやりたいことは、キャンバス上に描画されるクロップ ボックスのサイズに関係なく、正確に 560px X 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 を使用して再スケーリングせずに画像を拡大または縮小する方法はありますか?

4

2 に答える 2

1

それは可能です、そのドキュメントをチェックしてください：

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

出力キャンバスの出力先の幅と高さを設定できます。

その他のことは、必要な幅と高さに応じて比率を設定する必要があることです。560/420 は 4/3 に比例します。アスペクト比を 4/3 に設定します。これにより、何も妥協することなく、画像のサイズが目的のサイズに変更されます。

于 2017-11-22T20:46:26.240 に答える