Generate Image Avatars with Initials in JavaScript

Avatars create a digital representation of a user and are usually used in web profiles. Most of the time a user is required to upload an image and then used it as the profile. An example of this is Google Mail Services. When a user does not upload a profile image an avatar is generated using his/her initials. Are you curious about how this magic happens? Don’t worry I’ve got you covered. In this article, we are going to explore how we can generate avatars based on user initials.

The final version of this project can be viewed on Codesandbox.

Check out the complete source code in this GitHub Repository.

To follow along through this article you are required to have:

• Basic knowledge of HTML

• Knowledge of Javascript

• Some knowledge of Bootstrap

In this article, we are going to use HTML5, Bootstrap UI framework, and JavaScript to create an application that allows users to generate avatars using their names and the colors of their choice.

In this article, I will need you to clone the project from GitHub

git clone https://github.com/musebe/Avatars-JavaScript

cd Avatars-JavaScript

Code language: PHP (php)

In your favorite text editor, open the Avatars-JavaScript folder, right-click index.html, and open the file in your browser. You should be able to see this page after you enter your name, choose your favorite colors, and click generate.

Let us now examine the index.js to understand the functionality behind this application.

function  generateAvatar(

text,

foregroundColor  =  "white",

backgroundColor  =  "black"

) {

const  canvas  =  document.createElement("canvas");

download  =  document.getElementById("download");

const  context  =  canvas.getContext("2d");

  

canvas.width  =  200;

canvas.height  =  200;

  

// Draw background

context.fillStyle  =  backgroundColor;

context.fillRect(0, 0, canvas.width, canvas.height);

  

// Draw text

context.font  =  "bold 100px Assistant";

context.fillStyle  =  foregroundColor;

context.textAlign  =  "center";

context.textBaseline  =  "middle";

context.fillText(text, canvas.width  /  2, canvas.height  /  2  );

download.href=canvas.toDataURL("image/png");

return  canvas.toDataURL("image/png"); 

}

Code language: JavaScript (javascript)

The generateAvatar() function takes three parameters that is the text, foregroundColor and backgroundColor. We are going to use createElement method to create a canvas element in our HTML document.

createElement() method creates an element specified by tagName

HTML canvas is an element that can be used to draw graphics on a web page via scripting (usually JavaScript)

const  canvas  =  document.createElement("canvas");

Code language: JavaScript (javascript)

To get a drawing context on the canvas we use the HTMLCanvasElement.getContext() method and takes a contextType parameter getContext(contextType) for our case "2d" which leads to the creation of an object representing a two-dimensional rendering context.

const  context  =  canvas.getContext("2d");

Code language: JavaScript (javascript)

We can also specify the height pixels and width pixels of our canvas element by using the height and width attribute of the canvas element created.

canvas.width  =  200;

canvas.height  =  200;

We can then draw our background by first setting the background color by using the fillStyle property and then drawing a filled rectangle with the background set.

The fillStyle canvas property sets the color used in filling the drawing.

The fillRect() method draws a filled rectangle. The default background color is black.

The fillRect() takes four parameters, the x-coordinate of the upper corner of the rectangle, the y-coordinate of the upper corner of the rectangle, the width of the rectangle in pixels, and the height of the rectangle in pixels.

// this is the syntax: context.fillRect(x, y, width, height);

// in our code context.fillrect(0, 0, 200, 200)

context.fillRect(0, 0, canvas.width, canvas.height);

Code language: JavaScript (javascript)

To draw the text inside our canvas element we have to set the font using the font property, fill the text with color using the fillStyle property, text-align our text using the textAlign property, set the baseline used when drawing the text using text baseline property and draw our text on the canvas using fillText() method.

context.font  =  "bold 100px Assistant";

context.fillStyle  =  foregroundColor;

context.textAlign  =  "center";

context.textBaseline  =  "middle";

// context.fillText( text, x, y);

context.fillText(text, canvas.width  /  2, canvas.height  /  2  );  // (text, 100, 100)

Code language: JavaScript (javascript)

We can then return a data URL containing the representation of the image in the format specified by the type parameter in our case `image/png. To enable the user to download the avatar image we specify the target as the data URL of the image.

download.href=canvas.toDataURL("image/png");

return  canvas.toDataURL("image/png");

Code language: JavaScript (javascript)

We can get the values for full name, background color, and text color from the user. so we can use them as arguments to the generateAvatar() method. The generate() method wil do this for us and will be called once the generate button is clicked.

var  name=  document.getElementById("name").value;

var  bcgColor=  document.getElementById("bcg-color").value;

var  textColor=  document.getElementById("text-color").value;

Code language: JavaScript (javascript)

After getting the name of our user we can get the initials by first splitting the string using split(" ") then we get the first character from the first element and the last element. We then ensure that our initials are in uppercase.

const  myNames  =  name.split("  ");

const  initials  =  myNames.shift().charAt(0)  +  myNames.pop().charAt(0);

const  nameInitials  =initials.toUpperCase();

Code language: JavaScript (javascript)

Since we defined our avatar div to be of style display: none we can now show it and call the generated avatar method passing the values from the user.

var  avatarDiv  =  document.getElementById("avatarDiv");

if  (avatarDiv.style.display  ===  "none"){

avatarDiv.style.display  =  "block";

}

document.getElementById("avatar").src  =  generateAvatar(

nameInitials,

textColor,

bcgColor

);

Code language: JavaScript (javascript)

In this article, we have learned how we can generate avatars based on the user’s name. Its usefulness is the ability to automatically generate avatars even when the user has not uploaded a profile image.

This can be implemented in websites or apps that have the profile of a user once he/she has logged in.