Google Inspired Letter Avatar Generator With jQuery - katweKibsletterAvatarjs.js

Just another text avatar generator plugin with jQuery that helps you generate Google-like letter avatars from first letter of each word in a string. The plugin will generate the letter avatars on the HTML5 canvas elements so that they can be retrieved as PNG files.

How to use it:

1. To use the plugin start with adding the following JavaScript and CSS files in your document.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="katweKibsletterAvatarjs.js"></script>

2. Create an HTML5 canvas element and insert your username into the data-name attribute as these:

<canvas class="user-icon" data-name="J"></canvas>
<canvas class="user-icon" data-name="jQuery Script" width="25" height="25"></canvas>
...

3. Initialize the letter avatar generator and you're done.

katweKibsAvatar.init();

4. Specify the length of the generated letter avatar.

<canvas class="user-icon" 
        data-name="jQuery Script"
        data-chars="2">
</canvas>

// or
katweKibsAvatar.init({
  dataChars: 2
});

5. Change the size (width/height) of the generated letter avatar.

katweKibsAvatar.init({
  width:100,
  height:100
});

6. Change the default colors from which you can choose for the background of the letter avatar.

katweKibsAvatar.init({
  colours = [
    "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e",
    "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
    "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12",
    "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
  ];
});

---

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