Upload and edit image using Croppic jQuery plugin
I often have to code image upload widgets for profile photos or some kind of image editing feature. Each website layout uses custom photo sizes and cropping those image on server side could cause image distortion. Because of this I like to put image editing on client side and recently I discovered one new pretty simple plugin, Croppic.
It works in similar way as Twitter, Facebook or Linkedin profile photo widgets. First you select wanted image, after that you are presented with slide and zoom options, and when you are satisfied you click crop. Could not be any simpler than this!
The best part is that you set fixed size of wanted image, and your users only need to slide cropping mask over original image. There are also some more advanced options, like rotating, but you can remove them.
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
In this tutorial I will be using Image Intervention package, for server side image processing.
This post is submitted by one of our members. You may submit a new post here.