{"id":16274,"date":"2014-12-07T14:23:38","date_gmt":"2014-12-07T08:53:38","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=16274"},"modified":"2014-12-09T15:32:52","modified_gmt":"2014-12-09T10:02:52","slug":"how-to-get-name-initials-as-an-image","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-get-name-initials-as-an-image\/","title":{"rendered":"How to get name initials as an image?"},"content":{"rendered":"

While making an application, showing user’s image is a very common use case. Gone were the days when we used to show anonymous image in case a person’s profile image or display image is not present.<\/p>\n

We can easily show a person’s name initials as an image to identify the person.<\/p>\n

Like :<\/p>\n

\"Screen<\/p>\n

Lets consider this html, where we use an angular function defined in the controller, “$scope.getInitials(name)” to get an image in the form of a canvas<\/strong>.<\/p>\n


\n<img ng-src=\"{{user.profilePicUrl || getInitials(user.name)}}\" alt=\"{{user.name.first}}\"><\/code><\/p>\n

The function “getInitials”<\/strong>:<\/p>\n

[js]
\n$scope.getInitials = function (name) {<\/p>\n

var canvas = document.createElement(‘canvas’);
\n canvas.style.display = ‘none’;
\n canvas.width = ’32’;
\n canvas.height = ’32’;
\n document.body.appendChild(canvas);
\n var context = canvas.getContext(‘2d’);
\n context.fillStyle = "#999";
\n context.fillRect(0, 0, canvas.width, canvas.height);
\n context.font = "16px Arial";
\n context.fillStyle = "#ccc";
\n var first, last;
\n if (name && name.first && name.first != ”) {
\n first = name.first[0];
\n last = name.last && name.last != ” ? name.last[0] : null;
\n if (last) {
\n var initials = first + last;
\n context.fillText(initials.toUpperCase(), 3, 23);
\n } else {
\n var initials = first;
\n context.fillText(initials.toUpperCase(), 10, 23);
\n }
\n var data = canvas.toDataURL();
\n document.body.removeChild(canvas);
\n return data;
\n } else {
\n return false;
\n }
\n }
\n[\/js]<\/p>\n

In above function, we dynamically create a canvas and insert it in the document body using “appendChild()”<\/strong> method.<\/p>\n

Then, with “getContext()”<\/strong> function we get an object that provides methods and properties for drawing on that canvas. You can have a look at the canvas methods in details here<\/a><\/p>\n

So, in this way we can get an image using canvas.<\/p>\n

Hope this will help \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

While making an application, showing user’s image is a very common use case. Gone were the days when we used to show anonymous image in case a person’s profile image or display image is not present.<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":36,"footnotes":""},"categories":[1],"tags":[1186,377,4842,55,1564],"class_list":["post-16274","post","type-post","status-publish","format-standard","hentry","category-technology","tag-angular-js","tag-canvas","tag-html","tag-javascript","tag-ux"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t