Coding an image cropper plugin from scratch

When allowing users to upload their own images, whether it be for a profile picture or some other use, giving them the ability to trim the image down within the browser provides a huge benefit to the user. This is because most users would not know how to alter the image using a third-party application such as Photoshop. There are many image cropper plugins available on the Internet for free and many tutorials to help you use them, but there are very few examples that provide you with the entire solution. This recipe will show you how to create your own image cropper plugin from scratch, how to upload the image to a web server, and how to take data from the image cropper to resize and save the image to the user's specification.

Getting ready

This recipe is quite complex as it includes both client- and server-side code, so ensure you follow each step carefully. Before you begin this recipe, set up the following directory structure in the web...