Проблема отправить обрезанное изображение на мой сервер с помощью JavaScript

Question

Я новичок в области обрезки изображений, и у меня возникли проблемы с сохранением обрезанного изображения.Мой код уже загружает новое изображение и показывает предварительно обрезанное изображение, но я застрял на этом шаге.

У меня есть код, который я уже пробовал, который отправляет изображение на сервер, когда изображение извходной div, и элемент является объектом htmlinputelement.Когда я пытаюсь отправить свое изображение предварительного просмотра, это объект объекта и не работает.Я видел, что должен превратить свой объект в файл, но я не знаю, является ли это правильным способом, и мои навыки работы с JavaScript не так уж хороши.

// этот код для отправки на сервер и его рабочая функция uploadpicture (input) {

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

    reader.onload = function (e) {
        $('#img_final')
        .attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);

    //enviar img via ajax
    var file_data = input.files[0];

    var form_data = new FormData();

    var cpf_can = '<%= @candidato.cpf %>';
    console.log('cpf: ', cpf_can);

    form_data.append("file", file_data);
    form_data.append("cpf", cpf_can);


    var request = new XMLHttpRequest();
    request.open('POST', '/changecurimg/envia3por4ajax', /* async = */ false);
    request.send(form_data);

    if (request.response == 500){
        alert("Erro ao inserir foto! tente novamente");
        location.reload();
        $("#myModal").modal('hide');
    }
    else if (request.response == 200){
        location.reload();
        $("#myModal").modal('hide');
        $('#img_final').removeClass('hidden');
        $('#img_prev').addClass( "hidden" );
    }
}

}

// этот код показывает обрезку и изображение для предварительного просмотраfunction resize_modal () {

var $image = $(".img-container > img"),
    $dataX = $("#dataX"),
    $dataY = $("#dataY"),
    $dataHeight = $("#dataHeight"),
    $dataWidth = $("#dataWidth");

$image.cropper({
  aspectRatio: 3 / 4,
  data: {
    x: 480,
    y: 60,
    width: 640,
    height: 360
  },
  modal: true,
  preview: ".img-preview",
  done: function(data) {
    $dataX.val(Math.round(data.x));
    $dataY.val(Math.round(data.y));
    $dataHeight.val(Math.round(data.height));
    $dataWidth.val(Math.round(data.width));
  }
});

var $inputImage = $("#inputImage");
if (window.FileReader) {
    $inputImage.change(function () {
        var fileReader = new FileReader(),
                files = this.files,
                file;

        if (!files.length) {
            return;
        }

        file = files[0];

        if (/^image\/\w+$/.test(file.type)) {
            fileReader.readAsDataURL(file);
            fileReader.onload = function () {
                $inputImage.val("");
                $image.cropper("reset", true).cropper("replace", this.result);
            };
        } else {
            showMessage("Please choose an image file.");
        }
    });
} else {
    $inputImage.addClass("hide");
};

// $('document').ready(function(){
//     $('#myModal0').modal('show');
// };

};