We are used to displaing one default image when a user signs up on a website, and until the user changes their profile picture we display that default profile picture, I am sure you have noticed this on many websites.

Today we will learn in this article how to generate an image dynamically by taking the user’s first and last names.

I have created this demo in MVC application, you can use this on any C# platform, even on the Windows form application, as we are using pure C# to generate image from text.

Whena user signs up on your platform you can simply call this method and that will return the saved path of the image, and you can save that image path on your database along with that user.
  1. private Image GenerateAvtarImage(String text, Font font, Color textColor, Color backColor, string filename)
  2. {
  3. //first, create a dummy bitmap just to get a graphics object
  4. Image img = new Bitmap(1, 1);
  5. Graphics drawing = Graphics.FromImage(img);
  7. //measure the string to see how big the image needs to be
  8. SizeF textSize = drawing.MeasureString(text, font);
  10. //free up the dummy image and old graphics object
  11. img.Dispose();
  12. drawing.Dispose();
  14. //create a new image of the right size
  15. img = new Bitmap(110, 110);
  17. drawing = Graphics.FromImage(img);
  19. //paint the background
  20. drawing.Clear(backColor);
  22. //create a brush for the text
  23. Brush textBrush = new SolidBrush(textColor);
  25. //drawing.DrawString(text, font, textBrush, 0, 0);
  26. drawing.DrawString(text, font, textBrush, new Rectangle(-2, 20, 200, 110));
  28. drawing.Save();
  30. textBrush.Dispose();
  31. drawing.Dispose();
  33. img.Save(Server.MapPath("~/Images/" + filename + ".gif"));
  35. return img;
  37. }

This method will generate a 110 x 100 size gif format image and store that image into the “images” folder; you can change size and format as per your requirement. For generatin an image you can pass these values in the method:

  1. public void CreateProfilePicture()
  2. {
  3. Font font = new Font(FontFamily.GenericSerif, 45, FontStyle.Bold);
  4. Color fontcolor = ColorTranslator.FromHtml("#FFF");
  5. Color bgcolor = ColorTranslator.FromHtml("#83B869");
  6. GenerateAvtarImage("KS", font, fontcolor, bgcolor, "test");
  7. }

It will generate the following image,

img0.JPG

You can notice here I have set a fixed color for font and background o the image, you can pass here any colors like, ColorTranslator.FromHtml allows us to pass color hex value.

You can use any font style best suited to your website design, I have set here “GenericSerif” font family, let’s check how many other font families are available to set,
  1. public void testAllFonts()
  2. {
  3. string familyName;
  4. FontFamily[] fontFamilies;
  5. Font font = null;
  7. InstalledFontCollection installedFontCollection = new InstalledFontCollection();
  9. // Get the array of FontFamily objects.
  10. fontFamilies = installedFontCollection.Families;
  12. // The loop below creates a large string that is a comma-separated
  13. // list of all font family names.
  14. int count = fontFamilies.Length;
  15. for (int j = 0; j < count; ++j)
  16. {
  17. familyName = fontFamilies[j].Name;
  19. if (fontFamilies[j].IsStyleAvailable(FontStyle.Bold)) {
  20. font = new Font(familyName, 45, FontStyle.Bold);
  21. }
  22. else if(fontFamilies[j].IsStyleAvailable(FontStyle.Regular)){
  23. font = new Font(familyName, 45, FontStyle.Regular);
  24. }
  25. else if (fontFamilies[j].IsStyleAvailable(FontStyle.Strikeout)) {
  26. font = new Font(familyName, 45, FontStyle.Strikeout);
  27. }
  29. Color fontcolor = ColorTranslator.FromHtml("#FFF");
  30. Color bgcolor = ColorTranslator.FromHtml("#83B869");
  31. GenerateAvtarImage("KP", font, fontcolor, bgcolor, familyName + j);
  32. }
  33. }

img1.JPG

I have created a collection of some of the best colors, now we will set one random color to each image.
  1. public List<string> ColorsCode()
  2. {
  3. List<string> list = new List<string>();
  4. list.Add("#EEAD0E");
  5. list.Add("#8bbf61");
  7. list.Add("#DC143C");
  8. list.Add("#CD6889");
  9. list.Add("#8B8386");
  10. list.Add("#800080");
  11. list.Add("#9932CC");
  12. list.Add("#009ACD");
  13. list.Add("#00CED1");
  14. list.Add("#03A89E");
  16. list.Add("#00C78C");
  17. list.Add("#00CD66");
  18. list.Add("#66CD00");
  19. list.Add("#EEB422");
  20. list.Add("#FF8C00");
  21. list.Add("#EE4000");
  23. list.Add("#388E8E");
  24. list.Add("#8E8E38");
  25. list.Add("#7171C6");
  27. return list;
  28. }

Now write the following code that will select one random color from our color list.

  1. Color bgcolor = ColorTranslator.FromHtml(ColorsCode().OrderBy(a => Guid.NewGuid()).FirstOrDefault());

test6.JPG

If you are using a different font family you need to set font size according to that font; here I have set a 45 font size for the “GenericSerif” font family , and it also depends on what size of image you are generating.

Finally, if you implement this in your website it will look like the image below,
img3.JPG

Read more articles on C#: