Welcome Guest, Not a member yet? Register   Sign In
Save cropped image from image tag using cropme plugin using ajax in php

(This post was last modified: 05-28-2021, 11:50 PM by lgedson. Edit Reason: Spam link removed )

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.

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) {
      deep: true
  created:function() {
    this.options = JSON.parse(JSON.stringify(this.defaultOptions))
  mounted:function() {
  methods: {
    init:function() {
      this.el = document.getElementById('cropme')
      this.cropme = new Cropme(this.el, this.options)
        url: 'images/download.jpg',
    getPosition:function() {
      this.position = this.cropme.position()
    crop:function() {
      let img = document.getElementById('cropme-result')
      let imgInputField = document.getElementById('addFoodImage')
      let imgPreview = document.getElementById('foodImagePreview')
        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 is my ajax request

                    url: BASE_URL + "food/addFood",
                    type: 'post',
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (data) {
                        var res = JSON.parse(data);
                        if(res.code == 0){
                            setTimeout(function(){ location.reload(); }, 1000);

This is form input

<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?

Messages In This Thread
Save cropped image from image tag using cropme plugin using ajax in php - by lgedson - 05-25-2021, 12:07 AM

Theme © iAndrew 2016 - Forum software by © MyBB