HOWTO: Avatar Uploader

This sample demonstrates how to implement avatar creator based on Image Uploader. Usually avatar is a small image like 90x90 pixels, in the most of cases this image contains a face or some another portion of big original photo. To create avatar client-side we will need to open our photo in some image editor and crop it. It is not so convenient for users; it would be great to allow this functionality online. The idea is quite simple, we upload a photo using Image Uploader to a server, after the upload operation completes, users are redirected to editor page, where they can specify portion of uploaded photo. After they specify the portion, AJAX request containing specified rectangle is sent to a server and server crop operation is applied on the image server-side.

The sample is written for ASP.NET platform. Nevertheless the major functionality – editor allowing to specify portion of image is implemented in JavaScript, so you can easily reuse it on any platform.

Server crop transform is implemented using System.Drawing imaging library. Nevertheless if you use server platform rather than ASP.NET you can use another library, for example, ImageMagick.

Edited by user Monday, April 2, 2012 10:34:23 AM(UTC)  | Reason: Not specified