Ajax를 통해 자른 이미지 데이터를 PHP로 전송

Question

두 개의 입력 유형 = "파일"필드와 제출 버튼이있는 양식이 있습니다. 파일 필드 중 하나는 사용자가 자르고 다른 하나는 그렇지 않습니다. 내가 사용중인 자르기 플러그인은 자르기 상자입니다. 기본 사용자 인터페이스가 설정되어 있지만 Ajax를 통해 자른 이미지 및 자른 이미지가있는 양식 데이터를 PHP로 보낼 수있는 방법을 모르겠습니다. 여기까지 내가 가지고있는 것의 jsfiddle가있다. 제출 버튼은 Ajax를 통해 보내 누른 경우

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에 크기가 조정 된 이미지를 직접 추가 할 수 있습니다.

CropBox 플러그인에는 자른 이미지가있는 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