Dropzone.js

https://www.dropzonejs.com/

 

Pixie - Image Editor

https://codecanyon.net/item/pixie-image-editor/10721475

https://support.vebto.com/help-center/articles/10/13/50/getting-started

<link rel="stylesheet" type="text/css" href="{{asset('css/pixie.min.css')}}">
<a class="mr-2" href="#" id="myAvatar">
<img src="{{$userInfo->photo}}" alt="users avatar" class="users-avatar-shadow user_avatar" height="64" width="64">
</a>
<button type="button" id="custom-avatar" class="btn btn-sm btn-primary mr-25 ql-image">Change</a>
<pixie-editor></pixie-editor>
<script type="text/javascript" src="{{asset('js/scripts/pixie.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/scripts/extensions/dropzone.min.js')}}"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var csToken = $('meta[name="csrf-token"]').attr('content');
  var myAvatar = new Dropzone(document.body, {
    paramName: "avatar",
    method: "post",
    url: "{{ route('avatar.edit' ) }}",
    maxFilesize:50,
    acceptedFiles:"image/*",
    thumbnailMethod: 'contain',
    addRemoveLinks:0,
    //previewsContainer: "#myavatar",
    clickable: "#custom-avatar",
    headers: { 'X-CSRF-TOKEN': csToken },
    init: function(response, newValue) {
      //console.log(response);
    },
    error: function(response, newValue) {
      //console.log(response);
    },
    success: function(response, newValue) {
      //console.log(response);
    }
  });
  myAvatar.on("success", function(file,resp) {
    if(resp.avatar != '') jQuery(".user_avatar").attr('src',resp.avatar);
    $('.dz-preview.dz-processing.dz-image-preview').hide();
  });
  var pixie = new Pixie({
    crossOrigin: true,
    ui: {
      visible: false,
      showExportPanel: true,
      openImageDialog: {
       show: true
      },
      mode: 'overlay',
      toolbar: {
        hideOpenButton: true,
        hideCloseButton: false,
        hideHistoryButtons: false
      },
      nav: {
        replaceDefault: true,
        items: [
          {name: 'filter', icon: 'filter-custom', action: 'filter'},
          {name: 'crop', icon: 'crop-custom', action: 'crop'},
          {name: 'transform', icon: 'transform-custom', action: 'transform'}
        ]
      }
    },
    tools: {
      crop: {
        replaceDefaultPresets: true,
        defaultRatio: '1:1',
        items: ['1:1']
      }
    },
    onLoad: function() {
      pixie.getTool('crop').apply({width: 128, height: 128, left: 0, top: 0});
    },
    onSave: function(data, name) {
      var state = pixie.getState();
      $.ajax({
        headers: {'X-CSRF-TOKEN': csToken},
        type: 'put',
        url: '{{ route("avatar.pixie") }}',
        data: {
          name: name, data : data
        },
        success: function(resp) {
          if(resp.avatar != '') jQuery(".user_avatar").attr('src',resp.avatar);
          pixie.close();
        },
        error: function(resp) {
          console.log("error : " +JSON.stringify(resp));
        }
      }).done(function(resp){
        //
      }).fail(function(jqXHR, ajaxOptions, thrownError){
        alert(‎'No response from server');
      });
    }
  });
  $("#myAvatar").on('click', function (e) {
    pixie.openEditorWithImage(document.querySelector('.user_avatar'));
  });
});
</script>

 

 

라라벨 콘트롤러에 아래 내용 추가

public function pixie(Request $request)
{
  $message = $success = "";
  $data = request('data');
  $imageName = request('name');
  if(isset($data)) {
    $this->avatar = "avatar/".$imageName;
    $Avatar = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
    $success = Storage::disk('public')->put($this->avatar, $Avatar);
    $exists = Storage::url($this->avatar);
    $profInfo = UserProfile::where('user_id', auth()->id())->first();
    if( isset($profInfo) && isset($success) )
    {
      $profInfo->photo = $exists;
      $profInfo->save();
      $message = "You have updated successfully";
    }
    else if(isset($success))
    {
      $usrProfile = new UserProfile();
      $usrProfile->user_id = auth()->id();
      $usrProfile->photo = $exists;
      $usrProfile->save();
      $message = "You have created successfully";
    }
    else $message = "You can not update";
    return response()->json([ 'success' => $message, 'status' => $success, 'avatar' => $exists ], 200);
  }
}