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.

enter image description here

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.