0

トランスローダーを使用して画像をアップロードする方法について質問があります。私がやりたいことは次のとおりです。

ファイルのアップロード ボタンがあり、画像を選択するとポップアップが画面に表示され、画像の一部を選択するオプションが表示されます。これは、縦向きと横向きで行うことができます。明確にするための画像を次に示します。

ここに画像の説明を入力

ご覧のとおり、2 つのオプションがあります。肖像画と風景。座標をフォーム フィールドに保存します。上部の入力フィールドには横向きの座標が入力され、下部には縦向きの座標が入力されます。

[OK] をクリックすると、3 つの画像が保存されます。オリジナル、縦画像、横画像。

x と y を選択できる「トリミング」オプションがあることは知っているので、画像をトリミングできることはわかっています。

ポップアップでの画像のレンダリングは次のようになります。

// FILE UPLOAD CHANGE
$('#background').live('change', function(){ readURL(this); });
function readURL(input) {
    // SHOW MODAL
    $('#backgroundModal').modal('show');

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            // LOAD SRC ATTR AND SHOW IMAGE
            $('#backgroundimg').attr('src', e.target.result);
            $('#backgroundimg').show();

            // LOAD JCROP (PORTRAIT)
            loadjCrops(16,9,10,65,130,65);
            // ADD SOME COLOR TO LANDSCAPE BUTTON
            $('#landscape').addClass('selected');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

では、3 つの画像を保存するにはどうすればよいでしょうか。私はそれらをフォームに持っていません... .

4

1 に答える 1

1

ここでクロッピングを行う方法を紹介する共同創設者の 1 人によって書かれたサンプル アプリケーションがありますhttps://github.com/tim-kos/transloadit-image-cropper

于 2014-08-30T15:18:22.753 に答える