JavaScript Initial Avatar Creator: Render an avatar image with the user initials

Recommend this page to a friend!
     
  Info   Example   Demos   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 195 All time: 256 This week: 6Up
Version License JavaScript version Categories
initial-avatar 1.0BSD License1.0Graphics, Text processing
Description 

Author

Arturs Sosins

This object can render an avatar image with the user initials.

It takes the name of the user and creates a canvas object on which it renders the initial letters of the person name.

The background color of the image is picked by computing an hash of the user name. The foreground color is picked automatically to be a complimentary color of the background.

The size of the image and the font are configurable parameters. The font size is computed automatically from the image size and font type.

The generate image can be returned as a binary data string, or assigned to a given page img element, or creating a new img element.

Innovation Award
JavaScript Programming Innovation award nominee
November 2014
Number 3		 Avatars are graphics that are usually used by applications to represent their users.

This object can create simple avatar graphics by rending the user initials on a canvas image.

Manuel Lemos
Picture of Arturs Sosins
  Performance   Level  
Name: Arturs Sosins <contact>
Classes: 51 packages by
Country: United States United States
Age: 36
All time rank: 1
Week rank: 6 Down

Level 4 StarStarStarStar

 Innovation award
Innovation award
Nominee: 8x

Winner: 6x

Example

<!DOCTYPE html>
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 *
 * Initial Avatar class creates avatars for users from user initials.
 * It creates a hash from the user's name and generates a background color based on it.
 * Then it gets a complimentary color for the text, and calculates text size and position
 * based on the font and length of initials.
 * This package can output binary image data, or apply image to existing img element
 * or create new img element
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Create-avatar-from-user-initials
**************************************************************/
-->
<html>
<head>
</head>
<body>
<p>Enter your name: <input type='text' id='name' onkeyup='createAvatar(this)'/></p>
<p><img id='avatar' src=''/></p>
<script type='text/javascript' src='initialAvatar.js'></script>
<script type='text/javascript'>
function createAvatar(ob){
	var av = new initialAvatar(ob.value);
	av.applyToImage("avatar");
}
</script>
</body>
</html>

  Create your avatarExternal page  
Screenshots (1)  
  • as.png
  Files folder image Files (4)  
File Role Description
Accessible without login Plain text file example.html Example Example for users to try
Plain text file initialAvatar.js Class Main class source
Accessible without login Plain text file simple_example.html Example Simple example

Downloadinitial-avatar-2014-11-09.zip 7KB
Downloadinitial-avatar-2014-11-09.tar.gz 5KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:195
This week:0
All time:256
This week:6Up

  Applications that use this package  
Uses to generate profile's avatar if no profile pic is provided

Add link image If you know an application of this package, send a message to the author to add a link here.


  Related pages  
Documentation and examples