Save cropped image from image tag using cropme plugin using ajax in php

I have used Cropme jquery plugin to resize, crop and do other functionalities on an uploaded image. I want to save the cropped image in the database of my website Jazz Daily internet package. But when I try to store the image it uploads the image which was uploaded in ***SPAM LINK REMOVED***. Below is the config js.

Code:

new Vue({
  el: "#app",
  data: {
    options: {},
    position: {},
    defaultOptions: {
      container: {
        width: '100%',
        height: 400
      },
      viewport: {
        width: 200,
        height: 200,
        type: 'square',
        border: {
          width: 2,
          enable: true,
          color: '#fff'
        }
      },
      zoom: {
        enable: true,
        mouseWheel: true,
        slider: true
      },
      rotation: {
        slider: true,
        enable: true,
        position: 'left'
      },
      transformOrigin: 'image',
    },
    cropme: {},
    el: {}
  },
  watch: {
    options: {
      handler: function(val) {
        this.cropme.reload(val)
      },
      deep: true
    }
  },
  created:function() {
    this.options = JSON.parse(JSON.stringify(this.defaultOptions))
  },
  mounted:function() {
    this.init()
  },
  methods: {
    init:function() {
      this.el = document.getElementById('cropme')
      this.cropme = new Cropme(this.el, this.options)
      this.cropme.bind({
        url: 'images/download.jpg',
      })
    },
    getPosition:function() {
      this.position = this.cropme.position()
      $('#cropmePosition').modal()
    },
    crop:function() {
      let img = document.getElementById('cropme-result')
      let imgInputField = document.getElementById('addFoodImage')
      let imgPreview = document.getElementById('foodImagePreview')
      this.cropme.crop({
        width: 600
      }).then(function(res) {
        img.src = res
        imgInputField.src = res
        imgPreview.src = res
        // $('#cropmeModal').modal()
      })
    },
    reset:function() {
      this.options = JSON.parse(JSON.stringify(this.defaultOptions))
      this.cropme.destroy()
      this.init()
    }
  }
})

This is my ajax request

Code:

$.ajax({
                    url: BASE_URL + "food/addFood",
                    type: 'post',
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (data) {
                        $('#overlay').css('display','none');
                        var res = JSON.parse(data);
                        if(res.code == 0){
                            toastr.error(res.message);
                        }
                        else{
                            toastr.success(res.message);
                            setTimeout(function(){ location.reload(); }, 1000);
                        }
                    }
                });

This is form input

Code:

<input type="file" class="form-control-file position-absolute" accept="image/*" id="addFoodImage" name="addFoodImage" data-msg-accept="Bitte lade ein Bild mit einem gültigen Dateiformat hoch (jpg, png, tiff).">

and when i try to fetch the uploaded file in controller then it saves the initially uploaded image.

When the image is previewed then I am changing the value of input file type.

below is the image of form to get a clear idea. [color=var(--theme-link-color)]form[/color]

Please help me with this. How can I pass the image from img tag in ajax request or set the new cropped image in the file input?