如何通过传递名称返回头像图标

我要求通过传递名称它应该返回一个头像图标包含该名称中包含的单词的第一个字母。例如，如果我通过约翰亚伯拉罕它应该返回一个图标’JA’。我需要使用该图标在一个sapui5控件。我对此没有任何想法。如何实现这一点？任何帮助表示赞赏。

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

谢谢，

Answer 1

canvas回答是在正确的轨道上，但在您的情况下，您需要一个数据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上的示例

Answer 2

在这里查看演示。

JS BIN

您可以在此处阅读有关canvas的更多信

Answer 3

分叉@Sathvik Cheela代码以满足您的要求：

 console.clear() var CVS = document.createElement('canvas'), ctx = CVS.getContext('2d'); CVS.width = 500; CVS.height = 500; document.body.appendChild(CVS); // Add canvas to DOM // Transform input text function transformText(text) { return text .split(' ') .map((str) => str ? str[0].toUpperCase() : "") .join('') } // GRAPHICS TO CANVAS ///// function sendToCanvas(ob) { var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); ctx.font = ob.fontWeight + ' ' + ob.fontSize + ' ' + ob.fontFamily; ctx.textAlign = 'center'; ctx.fillStyle = ob.color; ctx.fillText(transformText(ob.text), CVS.width - 350, CVS.height / 3); }; img.src = ob.image; } /////////////////////////// // DO IT! ///////////////// var cvsObj = { image: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=31228042", text: "john doe", fontFamily: "Arial", fontWeight: "bold", fontSize: "30px", color: "rgba(0, 0, 0, 0.7)" }; sendToCanvas(cvsObj); document.getElementById('input').addEventListener('input', function() { cvsObj.text = this.value; sendToCanvas(cvsObj); }, false); 

        Text:    

Answer 4

您可以为此创建自定义UI5控件。 它也支持数据绑定:)

JSBin上的示例：

 var NameIcon = sap.ui.core.Control.extend("NameIcon", { // call the new Control type "NameIcon" and let it inherit // from sap.ui.core.Control // the Control API: metadata : { properties : { // setter and getter are created behind the scenes, // incl. data binding and type validation "name" : "string", // in simple cases, just define the type "size" : {type: "sap.ui.core.CSSSize", defaultValue: "40px"} // you can also give a default value and more } }, // the part creating the HTML: renderer : function(oRm, oControl) { // static function, so use the given "oControl" instance // instead of "this" in the renderer function oRm.write(""); oRm.writeEscaped(oControl.getInitials()); // write another Control property, with protection // against cross-site-scripting oRm.write(""); }, getInitials:function(){ var name = this.getName(); if (!name) return ""; var parts = name.split(" "); var result = parts.map(function(p){return p.charAt(0).toLocaleUpperCase();}).join(""); return result; }, // an event handler: onclick : function(evt) { // is called when the Control's area is clicked - no event registration required alert("Control clicked! Text of the Control is:\n" + this.getText()); } });