cropper.js 좌표가있는 원본 이미지 업로드

Question

cropper.js를 사용하고 있습니다. 원본 이미지와 자른 이미지가 아닌 자른 좌표 (x, y, 너비, 높이)를 업로드하고 싶습니다. 그렇게하는 것이 바람직한 방법은 무엇입니까?

감사합니다.

Answer 1

이 질문의 클라이언트 측에서 자르기 상자 데이터를 패키지화하고 서버로 보내는데 사용하는 코드는 다음과 같습니다. 내가 처리 할 서버 측에

formData.append('last_crop', JSON.stringify($imageBox.cropper('getCropBoxData')));

$('#crop_button').click(function(){ 
    // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`. 
    // Store crop coordinates to db for future visit. 
    var canvas = $imageBox.cropper('getCroppedCanvas'); 
    canvas.toBlob(function (blob) { 
     var formData = new FormData(); 
     formData.append('croppedImage', blob); // 'croppedImage' is the sent filename 
     formData.append('last_crop', JSON.stringify($imageBox.cropper('getCropBoxData'))); 

     $.ajax('{% url 'profile_crop_avatar' %}', { 
      method: "POST", 
      data: formData, 
      processData: false, 
      contentType: false, 
      success: function() { 
       console.log('Upload success'); 
      }, 
      error: function() { 
       console.log('Upload error'); 
      } 
     }); 
    }, "image/jpeg", 0.75); 

    // Also update masthead image after crop 
    $('#masthead-avatar').attr('src', canvas.toDataURL()); 
}); 

(장고)와 함께 좌표를 저장 : ESP 참조

# Save new image and crop coords to profile 
p = request.user 
p.last_crop_coords = request.POST.get('last_crop') 
p.save()