如何使用动态创建的姓名首字母显示头像图标

Question

我有一个要求，通过传递名称，它应该返回一个头像图标，其中包含该名称中包含的单词的第一个字母。例如：如果我通过 John Abraham，它应该返回一个带有“JA”的图标。

我需要在 SAPUI5 控件中使用该图标。我对此没有任何想法。如何实施？任何帮助表示赞赏。

Answer 1

画布答案在正确的轨道上，但在您的情况下，您需要一个数据 url，您可以将其分配给您的控件src或icon属性。

generateAvatar以下示例中的函数将名称（字符串）转换为图像数据 url（在 url 中包含作为 base64 gif 的图像）。数据 url 可以分配给UI5 控件上的Buttons 图标属性或任何其他图像 url 属性。您甚至可以将其用作具有数据绑定的格式化程序函数，如下例所示。

var model = new sap.ui.model.json.JSONModel({
  name: "John Doe"
});

new sap.m.Input({value:"{/name}", valueLiveUpdate:true}).setModel(model).placeAt("body");

new sap.m.Button({
  icon:{path: "/name", formatter: generateAvatar},
  text:"Hello"
}).setModel(model).placeAt("body");


function generateAvatar(name){
  var initials = name.split(' ').map(function(str) { return str ? str[0].toUpperCase() : "";}).join('');
  var canvas = document.createElement('canvas');
  var radius = 30;
  var margin = 5;
  canvas.width = radius*2+margin*2;
  canvas.height = radius*2+margin*2;

  // Get the drawing context
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(radius+margin,radius+margin,radius, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fillStyle = 'grey';
  ctx.fill();
  ctx.fillStyle = "white";
  ctx.font = "bold 30px Arial";
  ctx.textAlign = 'center';
  ctx.fillText(initials, radius+5,radius*4/3+margin);
  return canvas.toDataURL();
  //The canvas will never be added to the document.
}

JSBin 上的例子