MatthewCallis / Avatar
Licence: mit
Library for showing Gravatars or generating user avatars.
Stars: ✭ 191
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Avatar
Docker
Docker containers for OpenCog - Robot Operating System (ROS)
Stars: ✭ 72 (-62.3%)
Mutual labels: avatar
Avatar
Plug n play avatar, turn name, email, and any other string into beautiful avatar (or gravatar), effortless.
Stars: ✭ 1,525 (+698.43%)
Mutual labels: avatar
Makehuman Js
A library to build 3D human characters in the browser
Stars: ✭ 147 (-23.04%)
Mutual labels: avatar
Android Circular Progress
Android custom view that loads a circular progress indicator using ImageView or FrameLayout
Stars: ✭ 75 (-60.73%)
Mutual labels: avatar
Minecraft Avatar
PHP script (using GD) to generate avatar or skin from a Minecraft username
Stars: ✭ 104 (-45.55%)
Mutual labels: avatar
Avataaars Generator
Simple generator React app for avataaars
Stars: ✭ 2,078 (+987.96%)
Mutual labels: avatar
Letteravatarkit
📦 An extension that generates letter-based avatars/placeholders
Stars: ✭ 180 (-5.76%)
Mutual labels: avatar
React Avatar Editor
Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.
Stars: ✭ 1,846 (+866.49%)
Mutual labels: avatar
Ts3admin.class
The ts3admin.class is a powerful api for communication with Teamspeak 3 Servers from your website! Your creativity knows no bounds!
Stars: ✭ 103 (-46.07%)
Mutual labels: avatar
Laravel Scaffold
The base for developing awesome projects
Stars: ✭ 142 (-25.65%)
Mutual labels: avatar
Network Avatar Picker
A npm module that returns user's social network avatar. Supported providers: facebook, instagram, twitter, tumblr, vimeo, github, youtube and gmail
Stars: ✭ 74 (-61.26%)
Mutual labels: avatar
Facemoji Kit
Face tracker with blend shapes coefficients, 3D head pose and dense mesh in real-time on iOS, Android, Mac, PC and Linux.
Stars: ✭ 158 (-17.28%)
Mutual labels: avatar
Dicebear
DiceBear is an avatar library for designers and developers.
Stars: ✭ 1,161 (+507.85%)
Mutual labels: avatar
Materialabout
It's a material-design about screen to use on your Android apps. A developer profile and application information easy to integrate. 🔖
Stars: ✭ 1,511 (+691.1%)
Mutual labels: avatar
Amazingavatar
An android amazing avatar anim in CollapsingToolbarLayout.
Stars: ✭ 186 (-2.62%)
Mutual labels: avatar
Vue Image Crop Upload
A beautiful vue component for image cropping and uploading. (vue图片剪裁上传组件)
Stars: ✭ 1,892 (+890.58%)
Mutual labels: avatar
Avatar
Avatar is a JavaScript library for showing Gravatars or generating user avatars.
Examples
There are several examples on the website.
import Avatar from 'avatar-initials';
// or
const Avatar = require('avatar-initials')
// Add an avatar to an <img>
const avatar = Avatar.from(document.getElementById('avatar'), {
'useGravatar': false,
'initials': 'MC',
});
// If you just want the URL / string:
const github_avatar_url = Avatar.githubAvatar({
id: '12345'
});
const gravatar_url_from_email = Avatar.gravatarUrl({
email: '[email protected]'
});
const gravatar_url_from_hash = Avatar.gravatarUrl({
hash: '12929016fffb0b3af98bc440acf0bfe2'
});
const initial_png = Avatar.initialAvatar({
initials: 'MC',
initial_fg: '#888888',
initial_bg: '#f4f6f7',
initial_size: 0, // Defaults to height / 2
initial_weight: 100,
initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
});
This example will render an avatar with my initials "MC" as the image.
Options
Avatar is highly customizable and most options are self explanatory:
{
useGravatar: true, // Allow Gravatars or not.
fallbackImage: '', // URL or Data URI used when no initials are provided and not using Gravatars.
size: 80, // Size in pixels, fallback for hidden images and Gravatar
setSourceCallback: null, // Callback called when image source is set (useful to cache avatar sources provided by third parties such as Gravatar)
// Initial Avatars Specific
initials: '', // Initials to be used.
initial_fg: '#888888', // Text Color
initial_bg: '#f4f6f7', // Background Color
initial_size: 0, // Text Size in pixels
initial_weight: 100, // Font weight (numeric value for light, bold, etc.)
initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
// Gravatar Specific
hash: '', // Precalculated MD5 string of an email address
email: '', // Email used for the Gravatar
fallback: 'mm', // Fallback Type
rating: 'x', // Gravatar Rating
forcedefault: false, // Force Gravatar Defaults
allowGravatarFallback: false, // Use Gravatars fallback, not fallbackImage
// GitHub Specific
github_id: null, // GitHub User ID.
}
Installation
npm install --save avatar-initials
or copy the minified build from browser/
<script src="browser/avatar.js"></script>
jQuery Support
I haven't used jQuery in a long time and don't need it personally, so if you still use it the old helper is below.
if (typeof jQuery !== 'undefined') {
jQuery.fn.avatar = function avatar(options) {
return this.each(() => {
/* istanbul ignore else */
if (!jQuery.data(this, 'plugin_avatar')) {
jQuery.data(this, 'plugin_avatar', new Avatar(this, options));
}
});
};
}
Thanks
Pretty styles and design support kindly provided by Andrew Crocker.
Originally built with love at Apptentive.
Sun Knudsen for providing a PR with setSourceCallback
.
License
Avatar is MIT licensed.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].