如何将个人资料图像设置为名字和姓氏的首字母？

Question

基本上,我正在研究用户注册系统.我正在使用ReactJS做前端.对于注册用户,可以选择为其配置文件添加图像.当个人资料没有图像时,个人资料图片应该包含个人资料图片的第一个和第二个名字的第一个字母,如google plus do.

请在下面找到示例图片.

期待一种方法来做到这一点..如果有内置的插件或库来做更好.

Answer 1

我假设您可以访问名字和姓氏.使用它,我编写了这段代码,它将从名字和姓氏中取出第一个字母并应用于您的个人资料图片.

$(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>

Answer 2

UI Avatars 有一个简单易用的 API，没有限制或登录。不进行使用跟踪，也不存储任何信息。最终图像被缓存，但没有其他内容。只需写下名字或姓氏，或两者都写。

为用户“John Doe”生成具有默认设置的头像。
https://ui-avatars.com/api/?name=John+Doe

生成蓝色头像
https://ui-avatars.com/api/?background=0D8ABC&color=fff

生成随机背景头像。
https://ui-avatars.com/api/?background=random

Answer 3

它可以写成一行字。

fullName.split(' ').map(name => name[0]).join('').toUpperCase()

可运行片段：

fullName.split(' ').map(name => name[0]).join('').toUpperCase()

const fullName = document.getElementById('fullName').textContent;
const intials = fullName.split(' ').map(name => name[0]).join('').toUpperCase();
document.getElementById('profileImage').innerHTML = intials;

#profileImage {
  font-family: Arial, Helvetica, sans-serif;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: #004D3C;
  font-size: 3.5rem;
  color: #fff;
  text-align: center;
  line-height: 10rem;
  margin: 2rem 0;
}

Answer 4

JsFiddle中添加的css选项

• 您只需创建一个div内部div。
• 将内部line-height容器放置在完整的中心，并与容器的尺寸和相同text-align: center。

如果需要，还可以通过Javascript设置文本。
的HTML

<div id="container">
  <div id="name">
   </div>
</div>

的CSS

#container {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: #333;
}
#name {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 36px;
  line-height: 100px;
}

可选的Javascript

  var name = "Adam";
  var lastname = "Sandler";
  var initials = name.charAt(0)+""+lastname.charAt(0);
  document.getElementById("name").innerHTML = initials;