UserpicJS plugin

See it in action

Select a demo to see the code example and the result.

Code:


Timeline of space travel: top 5


Name Country, Date
1

Yuri Gagarin

Soviet Union, 12 April 1961
2

Alan Shepard

United States, 5 May 1961
3

Vladimír Remek

Czechoslovakia, 2 March 1978
4

Mirosław Hermaszewski

Poland, 27 June 1978
5

Sigmund Jähn

East Germany, 27 June 1978


Description

UserpicJS is a pure javascript plugin which creates a canvas-based avatars for users who don't have any photo. You can set up user's avatar as you want by changing of some parameters described in the table below.



Features



Usage

See the minimun example below:

<script src="/path/to/userpic.js"></script>
...
<div id="userpic" data-userpic-content="..."></div> 
...
<script>
var el = document.getElementById('userpic');
new Userpic(el, { });
</script>


Methods


Method Returns Description
getDataUrl() string

Returns base64-encoded string with image-data. This might be used for saving image on your server.

var userpic = new Userpic(element, options);
var imageData = userpic.getDataUrl();
$.post("upload.php", {imageData: imageData});

In upload.php could be following code:

$idata = preg_replace(
	'#^data:image/\w+;base64,#i',
	'',
	$_POST['imageData']
);
file_put_contents('/tmp/image.png', base64_decode($idata));

Next time you can just show /tmp/image.png instead of generating the new userpic element.



Options


Option Datatype Default Description
content string not set

Required param. Content — text displayed on the userpic (corresponding current mode). Content value is used to generate the background.

Content can be set via data-attribute parameter:

<div class="userpic" data-userpic-content="..."></div>
width number 96 Userpic width, px
height number 96 Userpic height, px
mode string letter

Type of displaying of text.
Valid values are:

  • letter: only first letter is displayed;
  • word: only first word is displayed;
  • name: first letters of each word with dots are displayed (A.B.);
  • firstLetters: first letters of each word are displayed (AB).
shape string|object { type: "circle" }

Shape of userpic. Can be set as string ("circle") or as object ({ type: "circle" }).

Valid values are:

  • circle;
  • square;
  • polygon: has additional param { type: "polygon", sides: 6 }.
shapeFilters array []

Filters which run before text is rendered. This is made to keep text clean. Value can be a string ("noise") or an object, if filter has its own params ({ name: "hLines", lineSize: 5 }).

All filters can be combined: [ "noise", "hLines" ].

Available filters:

  • grayscale — makes userpic black and white;
  • noise — adds white noise to userpic;
  • vLines — vertical lines. Filter own options:
    • lineSize — size of line;
    • opacity — opacity of line;
    • rgb — color of line as array with r,g,b values: [ 255, 0, 0 ]
  • hLines — horizontal lines, see the vLines
filters array [] Filters which run after text is rendered. See shapeFilters for more info.
fontFamily string Georgia, Arial, Tahoma Font family of the text.



You also may be interested in: