avataaars-generator
avataaars-generator copied to clipboard
fangpenlin
API to generate avatar
Hello,
Do you have plan to allow us to generate avatar on demand using url ?
What i mean is, i would like to generate an avatar for each new user in my product and store it on my database.
Could you give me some tips to do that ?
Tanks !
I was just about creating this issue when I found this 👆. I think an API should be provided for developers to generate avatars on the go using a URL.
It would make it possible for users to generate their own avatars in app.
I would really love an api ♥ ✌
I'd love an endpoint for a random avatar. Something like https://getavataaars.com/?random that'd then lead to a randomised avatar.
If this helps anyone: I use these C# methods to randomly generate and create a url for an avatar. Using any browser or I use HttpClient I download that as a file and save it.
public class CreateAccountRequest : SimpleCredentials
{
public Genders Gender { get; set; }
public string FirstName { get; set; }
public string MiddleName { get; set; }
public string LastName { get; set; }
public string AvatarGenerator()
{
var topTypes = new List<string>()
{
"NoHair","Eyepatch","Hat","Hijab","Turban","WinterHat1","WinterHat2","WinterHat3","WinterHat4","LongHairBigHair","LongHairBob","LongHairBun","LongHairCurly","LongHairCurvy","LongHairDreads","LongHairFrida","LongHairFro","LongHairFroBand","LongHairNotTooLong","LongHairShavedSides","LongHairMiaWallace","LongHairStraight","LongHairStraight2","LongHairStraightStrand","ShortHairDreads01","ShortHairDreads02","ShortHairFrizzle","ShortHairShaggyMullet","ShortHairShortCurly","ShortHairShortFlat","ShortHairShortRound","ShortHairShortWaved","ShortHairSides","ShortHairTheCaesar","ShortHairTheCaesarSidePart"
};
var top = RandomFromList(topTypes);
var topColors = new List<String>()
{
"Black","Blue01","Blue02","Blue03","Gray01","Gray02","Heather","PastelBlue","PastelGreen","PastelOrange","PastelRed","PastelYellow","Pink","Red","White"
};
var hairColor = RandomFromList(topColors);
var accessories = new List<string>()
{
"Blank","Kurt","Prescription01","Prescription02","Round","Sunglasses","Wayfarers"
};
var accessory = RandomFromList(accessories);
var facialHairTypes = new List<string>()
{
"Blank","BeardMedium","BeardLight","BeardMagestic","MoustacheFancy","MoustacheMagnum"
};
var facialHair = RandomFromList(facialHairTypes);
var facialHairColors = new List<String>()
{
"Auburn","Black","Blonde","BlondeGolden","Brown","BrownDark","Platinum","Red"
};
var facialColor = RandomFromList(facialHairColors);
var clothingType = new List<String>()
{
"BlazerShirt","BlazerSweater","CollarSweater","GraphicShirt","Hoodie","Overall","ShirtCrewNeck","ShirtScoopNeck","ShirtVNeck"
};
var clothing = RandomFromList(clothingType);
var clothColor = new List<String>()
{
"Black","Blue01","Blue02","Blue03","Gray01","Gray02","Heather","PastelBlue","PastelGreen","PastelOrange","PastelRed","PastelYellow","Pink","Red","White"
};
var clothingColor = RandomFromList(clothColor);
var eyeType = new List<String>()
{
"Close","Cry","Default","Dizzy","EyeRoll","Happy","Hearts","Side","Squint","Surprised","Wink","WinkWacky"
};
var eyes = RandomFromList(eyeType);
var eyeBrowType = new List<String>()
{
"Angry","AngryNatural","Default","DefaultNatural","FlatNatural","RaisedExcited","RaisedExcitedNatural","SadConcerned","SadConcernedNatural","UnibrowNatural","UpDown","UpDownNatural"
};
var eyeBrows = RandomFromList(eyeBrowType);
var mouthType = new List<String>()
{
"Concerned","Default","Disbelief","Eating","Grimace","Sad","ScreamOpen","Serious","Smile","Tongue","Twinkle","Vomit"
};
var mouth = RandomFromList(mouthType);
var skinColor = new List<String>()
{
"Tanned","Yellow","Pale","Light","Brown","DarkBrown","Black"
};
var skin = RandomFromList(skinColor);
//https://avataaars.io/?avatarStyle=Circle&topType=ShortHairTheCaesar&accessoriesType=Round&hairColor=BrownDark&facialHairType=Blank&facialHairColor=Auburn&clotheType=ShirtCrewNeck&clotheColor=PastelOrange&eyeType=Side&eyebrowType=SadConcernedNatural&mouthType=Concerned&skinColor=DarkBrown'
return $"https://avataaars.io/?avatarStyle=Circle" +
$"&topType={top}" +
$"&accessoriesType={accessory}" +
$"&hairColor={hairColor}" +
$"&facialHairType={facialHair}" +
$"&facialHairColor={facialColor}" +
$"&clotheType={clothingType}" +
$"&clotheColor={clothingColor}" +
$"&eyeType={eyes}" +
$"&eyebrowType={eyeBrows}" +
$"&mouthType={mouth}" +
$"&skinColor={skin}";
}
private string RandomFromList(List<String> Data)
{
return Data.OrderBy(x => Guid.NewGuid()).FirstOrDefault();
}
Nice one @BaileyMillerSSI, I would try to implement this in Kotlin and probably build an avatar generator app with it.
@ElNuru247 Good luck with it, I am going to be using these avataaars on a website I am writing. I want the users to get a random one at the start and then later can update in real time their specific features. But that is way later down the road for now it is just a nice way of displaying an avatar even if it is random right now.
https://www.npmjs.com/package/a-avataaar is a web component I created for generating avatars based on a given string. You can generate stable images for e.g dummy users and you do not have to rely on avataaars.io which sometimes seems to be down. Use as e.g. <a-avataaar identifier='John Doe'></a-avataaar>
Just to help anyone else along here's all the current possible options as JSON data / arrays. Might save a little bit of time.
{
"avatar-style": [
"Circle",
"Transparent"
],
"topType" : [
"NoHair",
"Eyepatch",
"Hat",
"Hijab",
"Turban",
"WinterHat1",
"WinterHat2",
"WinterHat3",
"WinterHat4",
"LongHairBigHair",
"LongHairBob",
"LongHairBun",
"LongHairCurly",
"LongHairCurvy",
"LongHairDreads",
"LongHairFrida",
"LongHairFro",
"LongHairFroBand",
"LongHairNotTooLong",
"LongHairShavedSides",
"LongHairMiaWallace",
"LongHairStraight",
"LongHairStraight2",
"LongHairStraightStrand",
"ShortHairDreads01",
"ShortHairDreads02",
"ShortHairFrizzle",
"ShortHairShaggyMullet",
"ShortHairShortCurly",
"ShortHairShortFlat",
"ShortHairShortRound",
"ShortHairShortWaved",
"ShortHairSides",
"ShortHairTheCaesar",
"ShortHairTheCaesarSidePart"
],
"accessoriesType": [
"Blank",
"Kurt",
"Prescription01",
"Prescription02",
"Round",
"Sunglasses",
"Wayfarers"
],
"hairColor": [
"Auburn",
"Black",
"Blonde",
"BlondeGolden",
"Brown",
"BrownDark",
"PastelPink",
"Platinum",
"Red",
"SilverGray"
],
"facialHairType": [
"Blank",
"BeardMedium",
"BeardLight",
"BeardMagestic",
"MoustacheFancy",
"MoustacheMagnum"
],
"clotheType": [
"BlazerShirt",
"BlazerSweater",
"CollarSweater",
"GraphicShirt",
"Hoodie",
"Overall",
"ShirtCrewNeck",
"ShirtScoopNeck",
"ShirtVNeck"
],
"eyeType": [
"Close",
"Cry",
"Default",
"Dizzy",
"EyeRoll",
"Happy",
"Hearts",
"Side",
"Squint",
"Surprised",
"Wink",
"WinkWacky"
],
"eyebrowType": [
"Angry",
"AngryNatural",
"Default",
"DefaultNatural",
"FlatNatural",
"RaisedExcited",
"RaisedExcitedNatural",
"SadConcerned",
"SadConcernedNatural",
"UnibrowNatural",
"UpDown",
"UpDownNatural"
],
"mouthType": [
"Concerned",
"Default",
"Disbelief",
"Eating",
"Grimace",
"Sad",
"ScreamOpen",
"Serious",
"Smile",
"Tongue",
"Twinkle",
"Vomit"
],
"skinColor": [
"Tanned",
"Yellow",
"Pale",
"Light",
"Brown",
"DarkBrown",
"Black"
]
}
@benjibee's post is very helpful, but note that it is incomplete. I believe the subcategories are missing, such as "graphic" for "GraphicShirt" and "ClotheFabric". Anyone knows an official list somewhere in the source code?
Almost complete list of components
/* eslint-disable quotes */
const data = {
avatarStyle: ["Circle", "Transparent"],
accessoriesType: [
"Blank",
"Kurt",
"Prescription01",
"Prescription02",
"Round",
"Sunglasses",
"Wayfarers",
],
hairColorCode: [
"#A55727",
"#000000",
"#B58142",
"#D6B370",
"#714232",
"#4A322B",
"#F59797",
"#ECDCBF",
"#C93200",
"#E8E1E1",
],
hairColor: [
"Auburn",
"Black",
"Blonde",
"BlondeGolden",
"Brown",
"BrownDark",
"PastelPink",
"Platinum",
"Red",
"SilverGray",
],
clotheColor: [
"Black",
"Blue01",
"Blue02",
"Blue03",
"Gray01",
"Gray02",
"Heather",
"PastelBlue",
"PastelGreen",
"PastelOrange",
"PastelRed",
"PastelYellow",
"Pink",
"Red",
"White",
],
clotheColorCode: [
"#262E33",
"#65C9FF",
"#5199E4",
"#25557C",
"#E6E6E6",
"#929598",
"#3C4F5C",
"#B1E2FF",
"#A7FFC4",
"#FFDEB5",
"#FFAFB9",
"#FFFFB1",
"#FF488E",
"#FF5C5C",
"#FFFFFF",
],
facialHairType: [
"Blank",
"BeardMedium",
"BeardLight",
"BeardMagestic",
"MoustacheFancy",
"MoustacheMagnum",
],
clotheType: [
"BlazerShirt",
"BlazerSweater",
"CollarSweater",
"GraphicShirt",
"Hoodie",
"Overall",
"ShirtCrewNeck",
"ShirtScoopNeck",
"ShirtVNeck",
],
eyeType: [
"Close",
"Cry",
"Default",
"Dizzy",
"EyeRoll",
"Happy",
"Hearts",
"Side",
"Squint",
"Surprised",
"Wink",
"WinkWacky",
],
eyebrowType: [
"Angry",
"AngryNatural",
"Default",
"DefaultNatural",
"FlatNatural",
"RaisedExcited",
"RaisedExcitedNatural",
"SadConcerned",
"SadConcernedNatural",
"UnibrowNatural",
"UpDown",
"UpDownNatural",
],
mouthType: [
"Concerned",
"Default",
"Disbelief",
"Eating",
"Grimace",
"Sad",
"ScreamOpen",
"Serious",
"Smile",
"Tongue",
"Twinkle",
"Vomit",
],
skinColor: [
"Tanned",
"Yellow",
"Pale",
"Light",
"Brown",
"DarkBrown",
"Black",
],
topType: [
"NoHair",
"Eyepatch",
"Hat",
"Hijab",
"Turban",
"WinterHat1",
"WinterHat2",
"WinterHat3",
"WinterHat4",
"LongHairBigHair",
"LongHairBob",
"LongHairBun",
"LongHairCurly",
"LongHairCurvy",
"LongHairDreads",
"LongHairFrida",
"LongHairFro",
"LongHairFroBand",
"LongHairNotTooLong",
"LongHairShavedSides",
"LongHairMiaWallace",
"LongHairStraight",
"LongHairStraight2",
"LongHairStraightStrand",
"ShortHairDreads01",
"ShortHairDreads02",
"ShortHairFrizzle",
"ShortHairShaggyMullet",
"ShortHairShortCurly",
"ShortHairShortFlat",
"ShortHairShortRound",
"ShortHairShortWaved",
"ShortHairSides",
"ShortHairTheCaesar",
"ShortHairTheCaesarSidePart",
],
};
export default data;
Hello, I'm quite a noob at FE because I'm mostly a BE dev, I can retrieve the image and put it in my tag by using the url, but I can only do this by using the domsanitizer.trustResourceUrl-method. Is there anyway to retrieve it using the url and instantly change it to the appropriate base64 string, so it can be send to BE and saved? Everything I've tried so far (4 days and counting) is giving me a CORS error (I only want to use URL when user changes his/her profile and retrieve the rest from the DB)
the frontend I'm using is Angular, and I'm referring to base64 the img as svg itself, not base64 the url
