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

(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.

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?
Reply
#2

look at create and upadetre function how crop file in ci 4

PHP Code:
<?php

namespace CoreCommon\Controllers;



use 
CoreCommon\Entities\ContactMediaEntity;
use 
CoreCommon\Libraries\CustomFileSystem;
use 
CoreCommon\Libraries\UrlQueryParam;
use 
CodeIgniter\HTTP\ResponseInterface;
use 
CoreCommon\Models\ContactMediaModal;

class 
ContactMedia extends ApiController
{


    /**
     * index function
     * @method : GET
     */
    public function index()
    {

        $contactModel = new ContactMediaModal();


        $parameterDataInput = new UrlQueryParam();

        $parameterDataInput->initParameters();
        if ($parameterDataInput->getExact()) {

            $result $contactModel->where($parameterDataInput->getExactExplode('key'), $parameterDataInput->getExactExplode('value'))
                ->orderBy($parameterDataInput->getSortExplode('key'), $parameterDataInput->getSortExplode('value'))
                ->paginate(10'default'$parameterDataInput->getPage());

        } else if ($parameterDataInput->getExcept()) {

            $result $contactModel->where($parameterDataInput->getExceptExplode('key') . ' !='$parameterDataInput->getExceptExplode('value'))
                ->orderBy($parameterDataInput->getSortExplode('key'), $parameterDataInput->getSortExplode('value'))
                ->paginate(10'default'$parameterDataInput->getPage());

        } else {

            $result $contactModel->like($parameterDataInput->getFilterExplode('key'), $parameterDataInput->getFilterExplode('value'))
                ->orderBy($parameterDataInput->getSortExplode('key'), $parameterDataInput->getSortExplode('value'))
                ->paginate(10'default'$parameterDataInput->getPage());

        }


        return $this->respond([
            'data' => $result,
            'pager' => $contactModel->pager->getDetails()
        ], ResponseInterface::HTTP_OKlang('Common.api.receive'));


    }

    /**
     * show function
     * @method : GET with params ID
     */
    public function show($id null)
    {

        $contactModel = new ContactMediaModal();


        return $this->respond([

            'data' => $contactModel->where('id'$id)->paginate(1'default'),
            'pager' => $contactModel->pager->getDetails()
        ], ResponseInterface::HTTP_OKlang('Common.api.receive'));

    }

    /**
     * create function
     * @method : POST
     */
    public function create()
    {
        $contactMediaModel = new ContactMediaModal();
        $customConfig = new \CoreCommon\Config\CoreCommonConfig();
        $imageService =     \CodeIgniter\Config\Services::image();
        $contactMediaEntity = new ContactMediaEntity();
        if ($this->request->getPost()) {


            $rules = [
                'image' => 'uploaded[image]|max_size[image,4096]|ext_in[image,png,jpg,gif,webp]',
                'contact_id' => 'required'
            ];
            if (!$this->validate($rules)) {

                return $this->respond([
                    'error' => $this->validator->getErrors(),
                    'success' => false
                
], ResponseInterface::HTTP_NOT_ACCEPTABLElang('Common.api.validation'));

            }

            $contactMediaEntity->contact_id $this->request->getPost('contact_id');
            if (isset($_FILES['image'])) {

                foreach ($this->request->getFileMultiple('image') as $avatar) {

                    $avatar->move($customConfig->uploadDirectory '/contact'time() . '.' $avatar->getClientExtension());



                    $contactMediaEntity->path $avatar->getName();
                    $contactMediaEntity->editPath();
                    $imageService->withFile(ROOTPATH $contactMediaEntity->path)
                        ->withResource()
                        ->save(ROOTPATH $contactMediaEntity->path90);

                    if (!$contactMediaModel->save($contactMediaEntity)) {

                        return $this->respond([
                            'error' => $contactMediaModel->errors(),
                            'success' => false,
                        ], ResponseInterface::HTTP_BAD_REQUESTlang('Common.api.reject'));

                    }
                }

            }


            return $this->respond([
                'data' => ''
            ], ResponseInterface::HTTP_CREATEDlang('Common.api.save'));
        }


    }

    /**
     * update function
     * @method : PUT or PATCH
     */
    public function update($id null)
    {


        $contactMediaModel = new ContactMediaModal();
        $customConfig = new \CoreCommon\Config\CoreCommonConfig();
        $imageService =     \CodeIgniter\Config\Services::image();
        $handy = new CustomFileSystem();

        $contactMediaEntity = new ContactMediaEntity();
        $conMedia null;
        if ($this->request->getPost()) {

            $rules = [
                'image' => 'uploaded[image]|max_size[image,4096]|ext_in[image,png,jpg,gif,webp]',

            ];

            if (!$this->validate($rules)) {

                return $this->respond([
                    'error' => $this->validator->getErrors(),
                    'success' => false,


                ], ResponseInterface::HTTP_NOT_ACCEPTABLE,  lang('Common.api.validation') );

            }


            $conMedia $contactMediaModel->where('id'$id)->first();

            if (is_null($conMedia)) {
                return $this->respond([
                    'error' => $this->validator->getErrors(),
                    'success' => false
                
], ResponseInterface::HTTP_NOT_FOUNDlang('Common.api.exist'));

            }

            $contactMediaEntity->contact_id $conMedia->contact_id;

            if (isset($_FILES['image'])) {

                foreach ($this->request->getFileMultiple('image') as $avatar) {
                    $avatar->move($customConfig->uploadDirectory '/contact'time() . '.' $avatar->getClientExtension());


                    $contactMediaEntity->id $id;
                    $contactMediaEntity->path $avatar->getName();
                    $contactMediaEntity->editPath();
                    $imageService->withFile(ROOTPATH $contactMediaEntity->path)
                        ->withResource()
                        ->save(ROOTPATH $contactMediaEntity->path90);


                    if (!$contactMediaModel->save($contactMediaEntity)) {

                        return $this->respond([
                            'error' => $contactMediaModel->errors(),
                            'success' => false,
                        ], ResponseInterface::HTTP_BAD_REQUEST,  lang('Common.api.reject'));

                    }
                }

            }


            $handy->removeSingleFile(ROOTPATH $conMedia->path);

            return $this->respond([
                    'data' => array(['id' => $id,
                        'contact_id' => $conMedia->contact_id,
                        'path' => $contactMediaEntity->path])]
                ResponseInterface::HTTP_OKlang('Common.api.update'));
        }
    }

    /**
     * edit function
     * @method : DELETE with params ID
     */
    public function delete($id null)
    {


        $contactFileModel = new ContactMediaModal();
        $handy = new CustomFileSystem();
        $id = ($id == $id);

        if ($id == 0) {

            $isExist $contactFileModel->where(['contact_id' => $this->request->getGet('foreignKey')])->findAll();
            $target = array('contact_id' => $this->request->getGet('foreignKey'));
        } else {
            $isExist $contactFileModel->where(['id' => $id])->findAll();
            $target = array('id' => $id);
        }


        if ($isExist) {
            $contactFileModel->where($target)->delete();
            foreach ($isExist as $path) {

                $handy->removeSingleFile(ROOTPATH $path->path);
            }


        }

        return $this->respond([
        ], ResponseInterface::HTTP_OK,  lang('Common.api.remove'));

    }


Enlightenment  Is  Freedom
Reply




Theme © iAndrew 2016 - Forum software by © MyBB