Set default user profile picture to an image of their initials

Question

More and more I am seeing companies set a user's default profile picture as shown in the screenshot below which is from the Google homepage...

How have Google achieved this?

Answer 1

Simple use .Net basic libraries. You can change in it as per your requirement. basic purpose is for creating user Profile Avatar image if user not use specific image for profile default image will be use. Two common types of images we need be made Rectangle & Circle.

For Circle Image

public MemoryStream GenerateCircle(string firstName, string lastName)
    {
        var avatarString = string.Format("{0}{1}", firstName[0], lastName[0]).ToUpper();

        var randomIndex = new Random().Next(0, _BackgroundColours.Count - 1);
        var bgColour = _BackgroundColours[randomIndex];

        var bmp = new Bitmap(192, 192);
        var sf = new StringFormat();
        sf.Alignment = StringAlignment.Center;
        sf.LineAlignment = StringAlignment.Center;

        var font = new Font("Arial", 72, FontStyle.Bold, GraphicsUnit.Pixel);
        var graphics = Graphics.FromImage(bmp);

        graphics.Clear(Color.Transparent);
        graphics.SmoothingMode = SmoothingMode.AntiAlias;
        graphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
        using (Brush b = new SolidBrush(ColorTranslator.FromHtml("#" + bgColour)))
        {
            graphics.FillEllipse(b, new Rectangle(0, 0, 192, 192));
        }
        graphics.DrawString(avatarString, font, new SolidBrush(Color.WhiteSmoke), 95, 100, sf);
        graphics.Flush();

        var ms = new MemoryStream();
        bmp.Save(ms, ImageFormat.Png);
        return ms;
    }

For Rectangle image :

public MemoryStream GenerateRactangle(string firstName, string lastName)
    {
        var avatarString = string.Format("{0}{1}", firstName[0], lastName[0]).ToUpper();

        var randomIndex = new Random().Next(0, _BackgroundColours.Count - 1);
        var bgColour = _BackgroundColours[randomIndex];

        var bmp = new Bitmap(192, 192);
        var sf = new StringFormat();
        sf.Alignment = StringAlignment.Center;
        sf.LineAlignment = StringAlignment.Center;

        var font = new Font("Arial", 72, FontStyle.Bold, GraphicsUnit.Pixel);
        var graphics = Graphics.FromImage(bmp);

        graphics.Clear((Color)new ColorConverter().ConvertFromString("#" + bgColour));
        graphics.SmoothingMode = SmoothingMode.AntiAlias;
        graphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
        graphics.DrawString(avatarString, font, new SolidBrush(Color.WhiteSmoke), new RectangleF(0, 0, 192, 192), sf);

        graphics.Flush();

        var ms = new MemoryStream();
        bmp.Save(ms, ImageFormat.Png);

        return ms;
    }

For generating background random colors can be use :

private List<string> _BackgroundColours = new List<string> { "339966", "3366CC", "CC33FF", "FF5050" };

i hope it will help your,please pass your suggestions to improve it.

Answer 2

You could save one image for each letter as

/your_path/a.png
/your_path/b.bng, 
/your_path/c.png
...

When loading the user profile, if the user does not have a picture filename in the db, you load the filename of the image with his/her initial instead.

For instance...

SELECT name, address, 
COALESCE(picture, CONCAT("/your_path/", LEFT(name, 1),".png")) as picture
FROM users_table WHERE... ; 

This way, when a user have a picture, the picture filename is loaded, if not, the filename for the file with his initials is loaded (assuming you are using mysql to store your user's data)