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

Posted 2023-02-22

【中文标题】如何将个人资料图像设置为名字和姓氏的首字母？

【英文标题】：How do I set profile image as first letters of first and last name?

【发布时间】：2016-08-17 19:50:57

【问题描述】：

基本上，我正在开发用户注册系统。我正在使用 ReactJS 做前端。对于注册用户，可以选择为其个人资料添加图像。 当个人资料没有图片时，个人资料图片应包含个人资料图片的第一个和第二个名称的第一个字母，就像 google plus 一样。

请在下面找到示例图片。

期待一种方法来做到这一点。如果有内置的插件或库来做到这一点，那就更好了。

【问题讨论】：

创建圈子，输入文字，完成...您尝试了什么？这很简单......

感谢朋友的回复。目前我正在这样做：D，在 google + 中，他们有时也会更改背景颜色。

如果你已经这样做了......那有什么问题？

是这种方式还是有其他内置插件？

有几种方法可以做到这一点。使用圆形图像，纯 CSS。我不知道是否有任何插件，但如果你正在寻找一个我想引导你到 SO 帮助部分。帮助部分解释说，这个网站不应该用于寻找库或插件。

【参考方案1】：

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;

【参考方案2】：

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

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

【讨论】：

我领先你 19 秒。 :D 代码几乎相同，只是我不使用 JQuery。

那 19 秒。投入编写 jQuery :p

【参考方案3】：

我的解决方案会处理名称超过 2 个单词的用户名。我使用正则表达式提取空格分隔的名称组件的首字母。

    var matches = str.match(/\b(\w)/g);
    var acronym = matches.join('');
    document.getElementById("name_acronym").innerHTML = acronym;

从您的 HTML 代码中调用包含此内容的函数，“name_acronym”是个人资料图片文本的 ID。

【参考方案4】：

获取字符串第一个字符的简单方法。 甚至有时您可能会在使用

时将

$

视为未定义

var firstName = $('#firstName').text();

试试这个...

var firstName = "Jhon";
var initial = firstName.charAt(0);
console.log('--------', initial);

通过这个你应该得到“J”作为输出

【参考方案5】：

可以单行写。

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

可运行的 sn-p：

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: #0c540c;
  font-size: 3.5rem;
  color: #fff;
  text-align: center;
  line-height: 10rem;
  margin: 2rem 0;

<div id="profileImage"></div>
<span id="fullName">Penny Liu</span>

【参考方案6】：

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

这是众多大品牌信赖的第三方服务。这些链接仅供参考，以了解如何使用它们。更深入的文档可以在他们的网站上找到。