How to create base64 profile image form user name or user email?

Question

I have User object Like following

{
  "id": "25",
  "name": "Mehul Rami",
  "email": "mehul@demo.com"
}

user name contain both first and last name.

I want to generate profile image form user object. like following:

Pick up any random color for background
if name present then The first letters from the users first name and the first letter of the users last name. i.e. Mehul Rami would be MR. if name not present then The first char from the email and the first char after the @ in the email. i.e. mehul@demo.com would be MD.

Once, image is generate I want to convert it in base64 string.

do you have any code written that tries to do that? you can share so we see how to help you proceed — Bernard 'Beta Berlin' Parah, Jan 17 '17 at 07:25
with CSS, you could use this: http://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle — Nina Scholz, Jan 17 '17 at 07:28

score 4 · Answer 1 · answered Jan 17 '17 at 09:22

The canvas API allows its content to transformed into a data url. This first requires you to draw the data to a canvas. Draw the circle first, and draw the text over it. You could do it as follows.

For more information I would suggest to take a look at MDN's documentation about the API.

//TODO: replace with initials extraction logic.
var initials = "MM";
var randomColor = '#' + (0x1000000|(Math.random()*0xFFFFFF)).toString(16).substr(1,6);

// Create a rectangular canvas which will become th image.
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = canvas.height = 100;

// Draw the circle in the background using the randomColor.
context.fillStyle = randomColor;
context.beginPath();
context.ellipse(
  canvas.width/2, canvas.height/2, // Center x and y.
  canvas.width/2, canvas.height/2, // Horizontal and vertical "radius".
  0, // Rotation, useless for perfect circle.
  0, Math.PI * 2 // from and to angle: Full circle in radians.
);
context.fill();

context.font = (canvas.height/3) + "px serif";
context.fillStyle = "#000";
// Make the text's center overlap the image's center.
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(initials, canvas.width/2, canvas.height/2);
  
// Show the image to the world.
var img = document.createElement("img");
img.src = canvas.toDataURL();
document.body.appendChild(img);

score 1 · Answer 2 · answered Jan 17 '17 at 07:53

var x= {
  "id": "25",
  "name": "Mehul Rami",
  "email": "mehul@demo.com"
}
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
function createContainer(){
  var Img = document.createElement('DIV');
    Img.classList.add('picture');
    Img.style.position= "relative";
    Img.style.display="block";
    Img.style.width = '100%';
    Img.style.height = '100%';
    Img.style.borderRadius = '50%';
    Img.style.backgroundColor = getRandomColor();
  return Img;
}
function createName(title){
    var span = document.createElement('A');
    span.innerHTML = title;
    span.style.width = '100%';
    span.style.height = "30%";
    span.style.position="absolute";
    span.style.bottom="0";
    span.style.top="0";
    span.style.right="0";
    span.style.left="0";
    span.style.fontSize="20px";
    span.style.margin="auto";
    span.style.color="#fff";
    span.style.textAlign="center";
  return span;
}
function setProfilePicture(x){
  if(x){
    if(x.name){
      y=x.name.split(' ');
    }
    var Img = createContainer();
    var title = y[0].charAt(0).toUpperCase() +" "+y[1].charAt(0).toUpperCase();
    var span = createName(title);
    Img.append(span);
    var parent =  document.getElementById("profilePicture");
    parent.append(Img);
    
    
  }
}
setProfilePicture(x);

#profilePicture{
  width:100px;
  height:100px;
}

<div id="profilePicture">
 <div>

please use `appendChild` – Nina Scholz Jan 17 '17 at 08:10 — Nina Scholz, Jan 17 '17 at 08:10

score 0 · Answer 3 · answered Jan 17 '17 at 07:34

You can make a div :

html

<div id="user-profile"></div>

css

#user-profile {
    width: 100px;
    border-radius: 50%;
    background-color: #999;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

js

var userProfile = document.getElementById('user-profile');
//Add content with JSON
userProfile.innerHTML = (...)

How to create base64 profile image form user name or user email?

3 Answers3