Avatar creation using predefined image sets

Question

This question is more about guidance than actually solving my problem:

I need to make an Avatar creator in C# using a huge set of categorised images.

Very straight-forward in concept, but I have never manipulated images in code, so I need some tips and pointers.

How I envisioned it working is that there will be 2 parts to the system:

1. A front-end that uses HTML+CSS to allow a user to select and position multiple images
2. A save action sends these images/layers and their positions to the server which then writes them out as a flattened image file

Now, this is my assumption of how such a system should work. If not, tips/pointers would be highly appreciated.

Carrying forward the assumption:

I have a vague feeling that I will need to use Canvas to create the image on client side for the first part. Although this brings up the issue of browser support. Would Canvas be the solution here, or would I be better off using plain HTML4+CSS2. Backtracking a bit, does Canvas even add any benefit to it? I saw the power of Canvas in Google's feedback/issue reporting system, where they use the this element to do client side screenshots!

For the second part, I haven't a clue. As I ask this question, I am reading/researching about Image Creation in C# and jargon like GDI+ and Image Library are popping up.

Relevant questions:

• C#: Save multiple images to a single file
• Are there any composite-avatar scripts that I could steal or take a look at?
• jQuery/JavaScript Library for avatar creation?

Gravatar or PHP are not options!

PS: I expect to be editing this question in the light of my research/findings and any assistance provided by the SO community, but I believe it is not a discussion as such. As my research on SO hasn't provided with much leads, I believe we could make this a Community Wiki with the best answers/suggestions amalgamated into one post. Thanks.

Answer 1

You could use simple ASP/HTML with postbacks to show an image based on different options they choose from combo boxes and other controls.

Posting back is still going to create a short delay for their browser to redownload the page with the new image. One option is you could use AJAX to just download the new image without reloading the entire page. This will probably give the best experience without requiring Flash/Silverlight.

How many different combinations of images will you have? You could precompute all possible combinations programmatically and store them. This would take more storage space, but less processing power and slightly faster postbacks.

If you want to generate an image for each request, you would draw each image on a Bitmap with the following method:

Bitmap avatarBitmap = new Bitmap(AvatarWidth, AvatarHeight);
using (Graphics g = Graphics.FromImage(avatarBitmap))
{
    foreach (Bitmap bitmap in ListOfImagesToDraw)
    {
        g.DrawImage(bitmap, 0, 0);
    }
}
avatarBitmap.Save(fileName, ImageFormat.Png);

This would require each item to be inside a Bitmap of the same size so that they can line up. For example, if you make all your images in Photoshop, you can have each item be a layer of the same image with a transparent background. Then you can do a batch save to save each layer to its own file.

If you need to define a Z-order so that some images draw on top of other images (for example, sunglasses drawing on top of a head and not behind) just make sure the images are in the right order in your ListOfImagesToDraw array. This array would be generated by the information in the postback.