![\"Screen](\"\/blog\/wp-ttn-blog\/uploads\/2014\/12\/Screen-Shot-2014-12-07-at-13.06.47-272x300.png\")
<\/p>\nWhile 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
<\/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 The function “getInitials”<\/strong>:<\/p>\n [js] var canvas = document.createElement(‘canvas’); In above function, we dynamically create a canvas and insert it in the document body using “appendChild()”<\/strong> method.<\/p>\n
\n<img ng-src=\"{{user.profilePicUrl || getInitials(user.name)}}\" alt=\"{{user.name.first}}\"><\/code><\/p>\n
\n$scope.getInitials = function (name) {<\/p>\n
\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