Skip to content

Upload and edit image using Croppic jQuery plugin

Notifications You must be signed in to change notification settings

viktortat/laravel-croppic

Repository files navigation

Upload and edit image using Croppic jQuery plugin and Laravel

This project is related to tutorial from Codingo Tuts.

In this tutorial I covered creating image upload/edit widget, which is ideal for profile photo manipulations. It works in similar way as Facebook, Twitter or Linkedin profile photo widgets.

Croppic works in following way:

  • when you select image from browse window it will be uploaded to server, in original form
  • server responds with url to newly uploaded image and Croppic renders it
  • user can slide image, zoom-in, zoom-out and after he clicks crop button data is sent to server
  • server receives url of original image, and cropping details like: x-position, y-position, cropped width, cropped height, angle.
  • after server processes image using cropping details, it sends success response to client
  • if any errors occur, alert dialog is displayed with error message
  • after successful cropping, final image is displayed to user in Croppic box
  • user can click X and start process all over again

Croppic in the action

alt text

About

Upload and edit image using Croppic jQuery plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages