Create an avatar using predefined sets of images
This question is more about a guide than a solution to my problem:
I need to create an avatar creator inC#
, using a huge set of classified images.
Very straight forward in concept, but I've never manipulated images in code, so I need hints and pointers.
As I foresaw it to work, there will be two parts of the system:
- The frontend that it uses
HTML+CSS
to allow the user to select and place multiple images - The save action sends these images / layers and their positions to the server, which then writes them as a flat image file.
Now this is my guess as to how such a system should work. If not, tips / pointers would be much appreciated.
Fulfillment of the assumption:
I have a vague feeling of what I would need to use Canvas
to create a client side image for the first part. Although this causes a browser support issue. Would be the Canvas
solution here, or would I be better off using plain HTML4+CSS2
. Give up a little back, Canvas
even add some benefit to it? I've seen a force Canvas
in google feedback / reporting system where they use this element to create client side screenshots!
In the second part, I don't know. When I ask this question, I read / research image creation in C # and jargon similar to GDI+
and appears Image Library
.
Relevant questions:
- C #: saving multiple images to one file
- Are there any complex avatar scripts I could steal or watch?
- jQuery / JavaScript Library to create an avatar?
Gravatar or PHP are not parameters!
PS: I expect you to edit this question in light of my research / findings and any help provided by the SO community, but I believe this is not a discussion per se. Since my SO research hasn't generated a lot of potential customers, I believe we could make this Community Wiki with the best answers / suggestions combined into one post. Thank.
source to share
You can use simple ASP / HTML with postback to show an image based on various options they choose from combo boxes and other controls.
Submitting back will still create a slight delay for the browser to reload the page with the new image. One option is you can use AJAX to load a new image without reloading the entire page. This will probably give a better experience without requiring Flash / Silverlight.
How many different combinations of images will you have? You can pre-combine all possible combinations programmatically and store them. This will require more memory, but less processing power and slightly faster postbacks.
If you want to generate an image for each request, you will draw each image to a bitmap in the following way:
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 will require each element to be within the same size bitmap in order for it to line up. For example, if you render all of your images in Photoshop, each element can 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 that draw on top of the head, not the back), just make sure the images are in the correct order in your ListOfImagesToDraw array. This array will be generated by the postback information.
source to share