Canvas-based Letter Avatar Plugin For jQuery - LetterPic
File Size: | 259 KB |
---|---|
Views Total: | 3501 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.