Upload and edit image using Croppic jQuery plugin
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bootstrap
config
database
public
resources
storage
tests
.env.example
.gitattributes
.gitignore
artisan
composer.json
composer.lock
gulpfile.js
package.json
phpspec.yml
phpunit.xml
readme.md
server.php

readme.md

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