Avatar is a JavaScript library for displaying Gravatars or creating user avatars that help you create a custom user avatar with Gravatar, Avatars.io, or custom patterns.
[Cartoon Avatars] A JavaScript Library For Creating Vector-Based Animated Faces
How to make use of it:
Install theĀ Avatar.js through NPM:
# NPM $ npm install avatar-initials --save
Import theĀ Avatar.js.
import Avatar from 'avatar-initials';
Create an empty img
tag to put the person’s avatar.
// Add image here
Generate an avatar type a Gravatar account.
var avatar = new Avatar(document.getElementById('example'), { // uses Gravatar 'useGravatar': true, // path to fallback image 'fallbackImage': '', // avatar size 'size': 80, // precalculated MD5 string of an email address 'hash': null, // email for the Gravatar 'email': null, // fallback type 'fallback': 'mm', // rating 'rating': 'x', // force defaults 'forcedefault': false, // Use Gravatars fallback image 'allowGravatarFallback': false });
Generate an avatar from an Avatars.io account.
var avatar = new Avatar(document.getElementById('example'), { // uses Avatars.io use_avatars_io: true, // Avatars.io options avatars_io: { // user ID user_id: null, // avatar Identifier identifier: null, // // Twitter ID or Username twitter: null, // Facebook ID or Username facebook: null, // Instagram ID or Username instagram: null, // small, medium, large size: 'medium' }, });
Generate a customized avatar from the plain textual content.
var avatar = new Avatar(document.getElementById('example'), { // avatar text initials: '', // text color initial_fg: '#888888', // bg color initial_bg: '#f4f6f7', // font size initial_size: null, // font weight initial_weight: 100, // font family initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'" });
Custom User Avatar Generator, Avatar Plugin/Github
See Demo And Download
Official Website(MatthewCallis): Click Here
This superior jQuery/javascript plugin is developed by MatthewCallis. For extra Advanced Usages, please go to the official website.