How do I set profile image as first letters of first and last name?

Issue

Basically, i'm working on user registration system. which i'm doing front-end using ReactJS. for registered users there is an option to add images for their profiles. when there is no images for the profiles, profile image should be contain the first letter from the first and second name for the profile picture like google plus do.

please find the sample image below.

Looking forward a way to do this.. better if there are inbuilt plugin or library to do this.

Solution

I have assumed that you have access to the first name and last name. Using that, I have written this code which will take the first letter from First name and last name and apply to your profile image.

$(document).ready(function(){
  var firstName = $('#firstName').text();
  var lastName = $('#lastName').text();
  var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
  var profileImage = $('#profileImage').text(intials);
});

#profileImage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #512DA8;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="firstName">Kalpesh</span>
<span id="lastName">Singh</span>
<div id="profileImage"></div>

Answered By - Kalpesh Singh