When developing in the social world of Web 2.0 you find yourself attatching avatars to users. These avatars not only allow the users to customize how the world sees them, but also to give you a way of identifying users without using text, conserving screen real estate.

After looking at the way that other sites allow you to upload your avatar, I know that I was going to have to do something similar. I thought about rolling my own, but who has the time. A short goole search later and I discovered Dave Spurr at defusion.org.uk had spent the time to create a javascript library built on Prototype and Script.aculo.us that allows you to crop images. He calls it Javascript Cropper UI. It’s very slick and since it builds upon libraries I am already using it was an obvious choice.

Unfortunately, out of the box it didn’t support multiple previews, something I wanted to include, so after a morning of hacking I have added the ability to pass in multiple individually sized preview windows. I also removed the dependecy on minimum widths and heights, as I pass in the size of each preview. You do need to constrain the ratio of your select box and previews equally however or your images will become distorted.
Check out a demo here.