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()); 
}); 

（ジャンゴ）でCOORDSを格納します：ESPを参照してください

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