javascript - 如何显示带有动态创建的名称首字母的头像图标

Question

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

我需要在 SAPUI5 控件中使用该图标。我对此没有任何想法。如何实现？感谢您的帮助。

Answer 1

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

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

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 的示例