{"id":27969,"date":"2022-06-27T06:47:44","date_gmt":"2022-06-27T06:47:44","guid":{"rendered":"http:\/\/generate-image-avatars-with-initials-in-javascript"},"modified":"2025-02-09T13:20:31","modified_gmt":"2025-02-09T21:20:31","slug":"generate-image-avatars-with-initials-in-javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/","title":{"rendered":"Generate Image Avatars with Initials in JavaScript"},"content":{"rendered":"

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\u2019t worry I\u2019ve got you covered.\nIn this article, we are going to explore how we can generate avatars based on user initials.<\/p>\n

Codesandbox<\/h2>\n

The final version of this project can be viewed on Codesandbox<\/a>.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Github<\/h2>\n

Check out the complete source code in this GitHub Repository<\/a>.<\/p>\n

Pre-requisites<\/h2>\n

To follow along through this article you are required to have:<\/p>\n

    \n
  • \n

    Basic knowledge of HTML<\/p>\n<\/li>\n

  • \n

    Knowledge of Javascript<\/p>\n<\/li>\n

  • \n

    Some knowledge of Bootstrap<\/p>\n<\/li>\n<\/ul>\n

    Introduction<\/h2>\n

    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.<\/p>\n

    Sample Project Setup<\/h2>\n

    In this article, I will need you to clone the project from GitHub<\/p>\n

    \ngit clone<\/span> https:\/\/github.com\/musebe\/Avatars-JavaScript<\/span>\n\ncd Avatars-JavaScript\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
    In your favorite text editor, open the Avatars-JavaScript<\/code> folder, right-click index.html<\/code>, 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.<\/p>\n
    \"img_1.png\"<\/p>\n
    Usage<\/h2>\n
    Let us now examine the index.js<\/code> to understand the functionality behind this application.<\/p>\n
    \nfunction<\/span>  generateAvatar<\/span>(\n\ntext,\n\nforegroundColor  =  \"white\"<\/span>,\n\nbackgroundColor  =  \"black\"<\/span>\n\n<\/span>) <\/span>{\n\nconst<\/span>  canvas  =  document<\/span>.createElement(\"canvas\"<\/span>);\n\ndownload  =  document<\/span>.getElementById(\"download\"<\/span>);\n\nconst<\/span>  context  =  canvas.getContext(\"2d\"<\/span>);\n\n  \n\ncanvas.width  =  200<\/span>;\n\ncanvas.height  =  200<\/span>;\n\n  \n\n\/\/ Draw background<\/span>\n\ncontext.fillStyle  =  backgroundColor;\n\ncontext.fillRect(0<\/span>, 0<\/span>, canvas.width, canvas.height);\n\n  \n\n\/\/ Draw text<\/span>\n\ncontext.font  =  \"bold 100px Assistant\"<\/span>;\n\ncontext.fillStyle  =  foregroundColor;\n\ncontext.textAlign  =  \"center\"<\/span>;\n\ncontext.textBaseline  =  \"middle\"<\/span>;\n\ncontext.fillText(text, canvas.width  \/  2<\/span>, canvas.height  \/  2<\/span>  );\n\ndownload.href=canvas.toDataURL(\"image\/png\"<\/span>);\n\nreturn<\/span>  canvas.toDataURL(\"image\/png\"<\/span>); \n\n}\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Create the Canvas Element<\/h3>\n
    The generateAvatar()<\/code> function takes three parameters that is the text<\/code>, foregroundColor<\/code> and backgroundColor<\/code>. We are going to use createElement method to create a canvas element in our HTML document.<\/p>\n
    \n
    createElement() method creates an element specified by tagName<\/p>\n<\/blockquote>\n
    \n
    HTML canvas is an element that can be used to draw graphics on a web page via scripting (usually JavaScript)<\/p>\n<\/blockquote>\n
    \nconst<\/span>  canvas  =  document<\/span>.createElement(\"canvas\"<\/span>);\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Draw the background<\/h3>\n
    To get a drawing context on the canvas we use the HTMLCanvasElement.getContext() <\/code>method and takes a contextType parameter getContext(contextType)<\/code> for our case "2d"<\/code> which leads to the creation of an object representing a two-dimensional rendering context.<\/p>\n
    \nconst<\/span>  context  =  canvas.getContext(\"2d\"<\/span>);\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    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.<\/p>\n
    \ncanvas.width  =  200;\n\ncanvas.height  =  200;\n\n<\/code><\/span><\/pre>\n
    We can then draw our background by first setting the background color by using the fillStyle<\/code> property and then drawing a filled rectangle with the background set.<\/p>\n
    \n
    The fillStyle canvas property sets the color used in filling the drawing.<\/p>\n<\/blockquote>\n
    \n<\/blockquote>\n
    \n
    The fillRect() method draws a filled rectangle. The default background color is black.<\/p>\n<\/blockquote>\n
    The fillRect()<\/code> 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.<\/p>\n
    \n\/\/ this is the syntax: context.fillRect(x, y, width, height);<\/span>\n\n\/\/ in our code context.fillrect(0, 0, 200, 200)<\/span>\n\ncontext.fillRect(0<\/span>, 0<\/span>, canvas.width, canvas.height);\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Draw the text<\/h3>\n
    To draw the text inside our canvas element we have to set the font using the font<\/code> property, fill the text with color using the fillStyle<\/code> property, text-align our text using the textAlign<\/code> property, set the baseline used when drawing the text using text baseline<\/code> property and draw our text on the canvas using fillText()<\/code> method.<\/p>\n
    \ncontext.font  =  \"bold 100px Assistant\"<\/span>;\n\ncontext.fillStyle  =  foregroundColor;\n\ncontext.textAlign  =  \"center\"<\/span>;\n\ncontext.textBaseline  =  \"middle\"<\/span>;\n\n\/\/ context.fillText( text, x, y);<\/span>\n\ncontext.fillText(text, canvas.width  \/  2<\/span>, canvas.height  \/  2<\/span>  );  \/\/ (text, 100, 100)<\/span>\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    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.<\/p>\n
    \ndownload.href=canvas.toDataURL(\"image\/png\"<\/span>);\n\nreturn<\/span>  canvas.toDataURL(\"image\/png\"<\/span>);\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Get inputs from the user<\/h3>\n
    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()<\/code> method. The generate() method wil do this for us and will be called once the generate<\/code> button is clicked.<\/p>\n
    \nvar<\/span>  name=  document<\/span>.getElementById(\"name\"<\/span>).value;\n\nvar<\/span>  bcgColor=  document<\/span>.getElementById(\"bcg-color\"<\/span>).value;\n\nvar<\/span>  textColor=  document<\/span>.getElementById(\"text-color\"<\/span>).value;\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    After getting the name of our user we can get the initials by first splitting the string using split(" ")<\/code> then we get the first character from the first element and the last element. We then ensure that our initials are in uppercase.<\/p>\n
    \nconst<\/span>  myNames  =  name.split(\"  \"<\/span>);\n\nconst<\/span>  initials  =  myNames.shift().charAt(0<\/span>)  +  myNames.pop().charAt(0<\/span>);\n\nconst<\/span>  nameInitials  =initials.toUpperCase();\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Since we defined our avatar div to be of style display: none<\/code> we can now show it and call the generated avatar method passing the values from the user.<\/p>\n
    \nvar<\/span>  avatarDiv  =  document<\/span>.getElementById(\"avatarDiv\"<\/span>);\n\nif<\/span>  (avatarDiv.style.display  ===  \"none\"<\/span>){\n\navatarDiv.style.display  =  \"block\"<\/span>;\n\n}\n\ndocument<\/span>.getElementById(\"avatar\"<\/span>).src  =  generateAvatar(\n\nnameInitials,\n\ntextColor,\n\nbcgColor\n\n);\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Conclusion<\/h2>\n
    In this article, we have learned how we can generate avatars based on the user\u2019s name. Its usefulness is the ability to automatically generate avatars even when the user has not uploaded a profile image.<\/p>\n
    This can be implemented in websites or apps that have the profile of a user once he\/she has logged in.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27970,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,371],"class_list":["post-27969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-under-review"],"acf":[],"yoast_head":"\nGenerate Image Avatars with Initials in JavaScript<\/title>\n<meta name=\"description\" content=\"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\u2019t worry I\u2019ve got you covered. In this article, we are going to explore how we can generate avatars based on user initials.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate Image Avatars with Initials in JavaScript\" \/>\n<meta property=\"og:description\" content=\"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\u2019t worry I\u2019ve got you covered. In this article, we are going to explore how we can generate avatars based on user initials.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-27T06:47:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-09T21:20:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Generate Image Avatars with Initials in JavaScript\",\"datePublished\":\"2022-06-27T06:47:44+00:00\",\"dateModified\":\"2025-02-09T21:20:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/\",\"name\":\"Generate Image Avatars with Initials in JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA\",\"datePublished\":\"2022-06-27T06:47:44+00:00\",\"dateModified\":\"2025-02-09T21:20:31+00:00\",\"description\":\"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\u2019t worry I\u2019ve got you covered. In this article, we are going to explore how we can generate avatars based on user initials.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA\",\"width\":728,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate Image Avatars with Initials in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Generate Image Avatars with Initials in JavaScript","description":"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\u2019t worry I\u2019ve got you covered. In this article, we are going to explore how we can generate avatars based on user initials.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Generate Image Avatars with Initials in JavaScript","og_description":"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\u2019t worry I\u2019ve got you covered. In this article, we are going to explore how we can generate avatars based on user initials.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-27T06:47:44+00:00","article_modified_time":"2025-02-09T21:20:31+00:00","og_image":[{"width":728,"height":400,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/"},"author":{"name":"","@id":""},"headline":"Generate Image Avatars with Initials in JavaScript","datePublished":"2022-06-27T06:47:44+00:00","dateModified":"2025-02-09T21:20:31+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/","name":"Generate Image Avatars with Initials in JavaScript","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA","datePublished":"2022-06-27T06:47:44+00:00","dateModified":"2025-02-09T21:20:31+00:00","description":"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\u2019t worry I\u2019ve got you covered. In this article, we are going to explore how we can generate avatars based on user initials.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA","width":728,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-image-avatars-with-initials-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Generate Image Avatars with Initials in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925788\/Web_Assets\/blog\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b\/23d064d46e9ec3f32a11e1b3101ce1e23954a50c-728x400-1_279708b23b.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27969"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27969\/revisions"}],"predecessor-version":[{"id":36780,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27969\/revisions\/36780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27970"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}