Generating avatars with initials is a neat way to visually represent users, especially when profile pictures are unavailable. This tutorial will guide you through the process to generate avatars with initials from a name in JavaScript. This technique is useful for applications where you need a placeholder image for users, contacts, or any other entity identified by name.
Setting Up the HTML Structure
First, we need to create the basic HTML structure for our page. This includes input fields for the first name and last name, a button to trigger the avatar generation, and an image element to display the generated avatar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Name Initial Avatar</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="inputs">
<form action="">
<label for="firstname">Firstname:</label>
<input type="text" id="firstname" />
<label for="lastname">Lastname:</label>
<input type="text" id="lastname" />
<button type="submit" id="generateAvatar">Generate Image</button>
</form>
</div>
<div class="outputs">
<img id="img" />
</div>
<script src="./app.js"></script>
Styling with CSS
Now, let’s add some CSS to style the HTML elements and make the page look presentable. This CSS will handle the layout, colors, and basic styling of the input fields, button, and avatar image.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
}
input[type="text"] {
padding: 0.5rem;
border-radius: 0.3rem;
border: none;
margin: 10px 0;
display: block;
background: #e9e9e9;
}
img {
border: 2px solid #f4f4f4;
border-radius: 50%;
}
.inputs,
.outputs {
padding: 0.5rem 1rem;
}
#generateAvatar {
padding: 0.5rem;
width: 100%;
border-radius: 0.5rem;
border: none;
background-color: #7070ff;
color: #f4f4f4;
cursor:pointer;
}
@media screen and (max-width: 560px) {
body {
flex-direction: column-reverse;
}
}
Implementing the JavaScript Logic
This is the core part of the tutorial. We’ll write JavaScript code to:
* Get the first name and last name from the input fields.
* Extract the initials from the names.
* Create a canvas element and draw the initials on it with a random background color.
* Display the generated avatar in the image element.
// selecting components
let firstname, lastname, generate, avatar, ctx, color;
firstname = document.getElementById("firstname");
lastname = document.getElementById("lastname");
generate = document.querySelector("form");
//creating canvas
avatar = document.createElement("canvas");
avatar.width = avatar.height = "200";
ctx = avatar.getContext("2d");
ctx.font = `${avatar.width / 2}px Arial`;
ctx.textAlign = "center";
//generating color
color = [
"#5050ff",
"#50ff50",
"#ff5050",
"#ff5000",
"#ff0050",
"#0050ff",
"#00ff50",
"#50ff00",
"#5000ff",
];
//functions
//function to get name initials
function getInitials() {
if (lastname.value == "") {
let Initials = firstname.value[0].toUpperCase();
return Initials;
} else {
let Initials = (firstname.value[0] + lastname.value[0]).toUpperCase();
return Initials;
}
}
//function to create avatar
function createAvatar(Initials) {
let random = Math.floor(Math.random() * color.length);
//clear canvas
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, avatar.width, avatar.height);
//add background
ctx.fillStyle = `${color[random]}60`;
ctx.fillRect(0, 0, avatar.width, avatar.height);
//add text
ctx.fillStyle = color[random];
ctx.fillText(Initials, avatar.width / 2, (65 / 100) * avatar.height);
//generate as Image
let dataURL = avatar.toDataURL();
document.getElementById("img").src = dataURL;
}
//Event Listener
generate.addEventListener("submit", (e) => {
e.preventDefault();
createAvatar(getInitials());
});
// Preloaded avatar for example
createAvatar("KG");
Adding header assets like CDN links
Here we will include CDN links to add support for different fonts, icons or styling purposes.
Adding footer assets
Here we will include links to external JavaScript files or libraries.
With these steps, you should now be able to generate avatars with initials from names using JavaScript. This is a simple yet effective way to enhance the user experience of your web applications. If you have any questions or suggestions, feel free to comment below.
