如何通过传递名称返回头像图标 [英] how to return avatar icon by passing a name

问题描述

我要求通过传递名称它应该返回一个头像
图标包含该名称中包含的单词的第一个字母。例如，如果我通过John Abraham它应该返回一个图标'JA'我需要在sapui5控件中使用该图标。我对此没有任何想法。如何实现这一点？感谢任何帮助。

I have a requirement that by passing a name it should return an avatar icon contains the first letters of the words contained in that name.For instance, if I pass John Abraham it should return an icon 'JA'.I need to use that icon in an sapui5 control.I do not have any idea on this.How to implement this?Any help is appreciated.

我需要头像icon像这样。你可以看到带有字母V的图标。头像图标

I need avatar icon like this.You can see the icon with letter V in this.avatar icon

谢谢，

推荐答案

帆布回答是在正确的轨道上，但是在您的情况下，您需要一个可以分配给控件的数据URL src 或 icon property。

The canvas answeres are on the right track, but in your case you need a data url that you can assign to your controls src or icon property.

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

The generateAvatar function in the following example converts a name (string) to a image data url (contains the image as base64 gif in the url). The data url can be assigned to the Buttons icon property or any other image url property on a UI5 control. And you can even use it as a formatter function with databinding as in the following example.

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

这篇关于如何通过传递名称返回头像图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！