如何创建base64配置文件图像表单用户名或用户电子邮件？

Question

我有User对象，如下面的

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

用户名包含名字和姓氏。

我想生成配置文件图像表单用户对象。如下：

1. 为背景选择任意颜色
2. 如果存在名称则用户名的第一个字母和用户姓氏的第一个字母。即Mehul Rami将是MR。如果名称不存在则电子邮件中的第一个字符和电子邮件中@之后的第一个字符。即mehul@demo.com将是MD。

生成图片后，我想将其转换为base64字符串。

Answer 1

canvas API允许将其内容转换为数据URL。这首先要求您将数据绘制到画布上。首先绘制圆，然后在其上绘制文本。你可以这样做。

有关详细信息，我建议您查看有关API的MDN's documentation。

＆＃13;

＆＃13;

//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);

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以制作一个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 = (...)

Answer 3

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

<div id="profilePicture">
 <div>

＆＃13;

＆＃13;

＆＃13;