This JavaScript code snippet helps you to create avatar generator. It defines a JavaScript function named “GenerateAvatar” which creates a personalized user avatar. It retrieves the user’s input for the text, foreground color, and background color from the HTML elements with IDs “text”, “fgColor“, and “bgColor” respectively. Then it creates a 200×200 canvas element and sets its background color to the user-specified background color after that, it sets the font, text color, alignment, and position for the user-specified text on the canvas.
Finally, it updates the “avatar” and “download-link” HTML elements with the generated avatar image and the “DOMContentLoaded” event listener at the bottom of the code ensures that the avatar is generated when the page is fully loaded.
How to Create JavaScript Avatar Generator
Create the HTML structure as follows to create an avatar generator:
<h1 class="title">Click on the avatar to download the image</h1> <div class="wrapper"> <a id="download-link" download="generated-avatar"> <img id="avatar" alt="Avatar" /> </a> <div class="modifier"> <div> <label for='fgColor'>Text Color:</label> <input type="color" id="fgColor" value="#FFFFFF"/> </div> <div style="margin-bottom:6px"> <label for='bgColor'>Background Color:</label> <input type="color" id="bgColor" value="#552525"/> </div> <div> <label for='fgColor'>Text:</label> <input type="text" id="text" value="GB" style="background:#dae1e3; height:20px"/> </div> <button onclick="generateAvatar()" style="margin:20px; padding:10px 0; cursor:pointer;">OK</button> </div> </div>
Style the avatar generator using the following CSS styles:
* {
margin:0;
padding:0;
border:none;
}
body, html {
background-color:#a4e8a0;
}
.wrapper {
background-color:##a4e8a0;
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
height:95vh;
flex-wrap:wrap;
margin: 0 auto;
width:80%;
}
img {
box-shadow:5px 5px 20px rgb(0,0,0,0.2);
border-radius:50%;
height:200px;
width:200px;
background:white;
text-align:center;
}
.modifier {
display:flex;
flex-direction:column;
align-items:space-between;
font-family:Sans-Serif;
background:white;
border-radius:20px;
padding:20px;
}
.title {
color:white;
text-align:center;
font-family:Sans-Serif;
margin-top:5vh;
font-size:20px
}
input[type=color] {
border:solid rgb(0,0,0,0.5) 1px;
border-radius:5px;
}
Finally add the following JavaScript function for its functionality:
/*
From: https://dev.to/dcodeyt/build-a-user-profile-avatar-generator-with-javascript-436m
*/
function generateAvatar() {
const text = document.querySelector('#text').value;
const fgColor = document.querySelector('#fgColor').value ;
const bgColor = document.querySelector('#bgColor').value ;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = "bold 70px Sans-Serif";
ctx.fillStyle = fgColor;
ctx.textAlign = "center";
ctx.textBaseline = "middle"
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
document.getElementById("avatar").src = canvas.toDataURL("image/png");
document.getElementById('download-link').href = document.getElementById("avatar").src;
}
window.addEventListener("DOMContentLoaded", (event) => {
generateAvatar();
document.getElementById('download-link').href = document.getElementById("avatar").src;
});
That’s all! hopefully, you have successfully created JavaScript Avatar Generator. If you have any questions or suggestions, feel free to comment below.
