AjaxからPHPにクロップされたイメージデータを送信する

Question

私は、2つの入力タイプ= "ファイル"フィールドと送信ボタンを含むフォームを持っています。ファイルフィールドの1つはユーザークロップされ、もう1つは表示されません。私が使用しているクロッピングプラグインは、クロップボックスです。私は基本的なユーザーインターフェイスを設定しましたが、フォームデータを切り抜いた画像と非切り抜きの画像をAjax経由でPHPに送信する方法を理解できません。ここに私がこれまで持っていたもののjsfiddleがあります。

HTML

<form class="image_form" action="" method="post" enctype="multipart/form-data"> 
    <input type="file" id="cropimage"> 
    <input type="file"> 
    <input type="submit" value="submit"> 
</form> 

jQueryの

$(function() { 
    $("#cropimage").on('change', function() { 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function() { 
     var $img = $('<img />').attr({ 
     src: reader.result 
     }); 
     $img.on('load', function() { 
     $img.cropbox({ 
      width: 600, 
      height: 400 
     }).on('cropbox', function(event, results, img) { 
      submission(JSON.stringify(results)); 
     }); 
     }); 
     $('body').append($img); 
    }; 
    reader.readAsDataURL(file); 
    }); 
}); 

function submission(get_data) { 
    $(".image_form").submit(function(e) { 
    e.preventDefault(); 

    console.log(get_data); 

    $.ajax({ 
     type: 'POST', 
     url: '', 
     data: new FormData(this), 
     processData: false, 
     contentType: false, 
     success: function(data) { 

     } 
    }); 
    }); 

} 

ユーザーが画像をアップロードした後に送信ボタンがアヤックスを通じて送信するために押された場合、それはチェックします。 Ajaxを使って切り取った画像を元の画像ではなく、どうやって送ることができますか？

Answer 1

FormDataを使用すると、Blobにサイズ変更されたイメージを直接追加できます。

クロップボックスプラグインは、クロップされた画像でブロブを取得するために使用できるgetBlobメソッドを持っています。必要なのは、あなたのFORMDATAにブロブを追加することです：

formData.append('croppedFile', imageBlob) 
// or if you want to add filename 
formData.append('croppedFile', imageBlob, 'cropped.jpg') 

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append https://github.com/acornejo/jquery-cropbox#methods