Canvas-based Letter Avatar Plugin For jQuery - LetterPic

Just another jQuery text avatar plugin which converts usernames into canvas based avatar pictures like Google does in several web apps. The generated avatar will be a picture which can be downloaded as a png file.

How to use it:

1. Import jQuery library and the jQuery LetterPic plugin's script into your html page.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/jquery.letterpic.min.js"></script>

2. Create an HTML5 canvas element in which you want to generate the text avatar.

<canvas class="demo" title="User Name" data-userid="1"></canvas>

3. Just initialize the plugin on the canvas element and done.

$(".demo").letterpic();

4. Customize the generated avatar:

$(".demo").letterpic({

  // an array of colors
  colors: [],

  // an array of gradients
  gradients: []

  // font family
  font: 'Arial',

  // 'color', 'images' or 'gradients'
  fill: 'color'

  // color of image overlay
  imageOverlayColor: rgba(0, 0, 0, 0)

  // font color            
  fontColor: '#fff',

  // font size
  fontSize: .45
  
});

Change log:

2017-11-27

• Fixed issue, when there are more elements than predifened bg's

2017-07-14

• Misprint in self var declaration fixed

2017-04-11

• Some refactoring. New settings.

2017-03-29

• Image loading error handling fix

2017-03-28

• Gradient and image background options

---

This awesome jQuery plugin is developed by yakovlevga. For more Advanced Usages, please check the demo page or visit the official website.