API to generate avatar

[gblachonupg]

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 !

[ismailnurudeen]

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 ♥ ✌

[ChildishGiant]

I'd love an endpoint for a random avatar. Something like https://getavataaars.com/?random that'd then lead to a randomised avatar.

[BaileyMillerSSI]

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();
        }

[ismailnurudeen]

Nice one @BaileyMillerSSI, I would try to implement this in Kotlin and probably build an avatar generator app with it.

[BaileyMillerSSI]

@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.

[Artur-]

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>

[benjibee]

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"
    ]
}

[msawired]

@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?

[AzadKshitij]

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;

[MaximVerb]

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

[ZeusMode]

sorry for the late reply here... for those who are looking for the simplest way to implement using jquery. HTML is formatted

hope it saves time of someone

HTML

<div>
    <form id="avatarForm">
        <div>
            <label for="topType">Top Type</label>
            <select id="topType">
                <option value="ShortHairTheCaesar">Short Hair The Caesar</option>
                <option value="LongHairStraight">Long Hair Straight</option>
                <!-- Adicione mais opções conforme necessário -->
            </select>
        </div>
        <div>
            <label for="accessoriesType">Accessories Type</label>
            <select id="accessoriesType">
                <option value="Blank">Blank</option>
                <option value="Kurt">Kurt</option>
                <option value="Prescription01">Prescription01</option>
                <option value="Prescription02">Prescription02</option>
                <option value="Round">Round</option>
                <option value="Sunglasses">Sunglasses</option>
                <option value="Wayfarers">Wayfarers</option>
            </select>
        </div>
        <div>
            <label for="hairColor">Hair Color</label>
            <select id="hairColor">
                <option value="Auburn">Auburn</option>
                <option value="Black">Black</option>
                <option value="Blonde">Blonde</option>
                <option value="BlondeGolden">Blonde Golden</option>
                <option value="Brown">Brown</option>
                <option value="BrownDark">Brown Dark</option>
                <option value="PastelPink">Pastel Pink</option>
                <option value="Platinum">Platinum</option>
                <option value="Red">Red</option>
                <option value="SilverGray">Silver Gray</option>
            </select>
        </div>
        <div>
            <label for="facialHairType">Facial Hair Type</label>
            <select id="facialHairType">
                <option value="Blank">Blank</option>
                <option value="BeardMedium">Beard Medium</option>
                <option value="BeardLight">Beard Light</option>
                <option value="BeardMagestic">Beard Magestic</option>
                <option value="MoustacheFancy">Moustache Fancy</option>
                <option value="MoustacheMagnum">Moustache Magnum</option>
            </select>
        </div>
        <div>
            <label for="clotheType">Clothe Type</label>
            <select id="clotheType">
                <option value="BlazerShirt">Blazer Shirt</option>
                <option value="BlazerSweater">Blazer Sweater</option>
                <option value="CollarSweater">Collar Sweater</option>
                <option value="GraphicShirt">Graphic Shirt</option>
                <option value="Hoodie">Hoodie</option>
                <option value="Overall">Overall</option>
                <option value="ShirtCrewNeck">Shirt Crew Neck</option>
                <option value="ShirtScoopNeck">Shirt Scoop Neck</option>
                <option value="ShirtVNeck">Shirt V Neck</option>
            </select>
        </div>
        <div>
            <label for="eyeType">Eye Type</label>
            <select id="eyeType">
                <option value="Close">Close</option>
                <option value="Cry">Cry</option>
                <option value="Default">Default</option>
                <option value="Dizzy">Dizzy</option>
                <option value="EyeRoll">Eye Roll</option>
                <option value="Happy">Happy</option>
                <option value="Hearts">Hearts</option>
                <option value="Side">Side</option>
                <option value="Squint">Squint</option>
                <option value="Surprised">Surprised</option>
                <option value="Wink">Wink</option>
                <option value="WinkWacky">Wink Wacky</option>
            </select>
        </div>
        <div>
            <label for="eyebrowType">Eyebrow Type</label>
            <select id="eyebrowType">
                <option value="Angry">Angry</option>
                <option value="AngryNatural">Angry Natural</option>
                <option value="Default">Default</option>
                <option value="DefaultNatural">Default Natural</option>
                <option value="FlatNatural">Flat Natural</option>
                <option value="RaisedExcited">Raised Excited</option>
                <option value="RaisedExcitedNatural">Raised Excited Natural</option>
                <option value="SadConcerned">Sad Concerned</option>
                <option value="SadConcernedNatural">Sad Concerned Natural</option>
                <option value="UnibrowNatural">Unibrow Natural</option>
                <option value="UpDown">Up Down</option>
                <option value="UpDownNatural">Up Down Natural</option>
            </select>
        </div>
        <div>
            <label for="mouthType">Mouth Type</label>
            <select id="mouthType">
                <option value="Concerned">Concerned</option>
                <option value="Default">Default</option>
                <option value="Disbelief">Disbelief</option>
                <option value="Eating">Eating</option>
                <option value="Grimace">Grimace</option>
                <option value="Sad">Sad</option>
                <option value="ScreamOpen">Scream Open</option>
                <option value="Serious">Serious</option>
                <option value="Smile">Smile</option>
                <option value="Tongue">Tongue</option>
                <option value="Twinkle">Twinkle</option>
                <option value="Vomit">Vomit</option>
            </select>
        </div>
        <div>
            <label for="skinColor">Skin Color</label>
            <select id="skinColor">
                <option value="Tanned">Tanned</option>
                <option value="Yellow">Yellow</option>
                <option value="Pale">Pale</option>
                <option value="Light">Light</option>
                <option value="Brown">Brown</option>
                <option value="DarkBrown">Dark Brown</option>
                <option value="Black">Black</option>
            </select>
        </div>
    </form>
</div>
<div style="text-align: center;">
    <img id="avatarImage" src="" alt="Avatar Preview" style="max-width: 100%; height: auto;">
</div>

Jquery

            function generateURL() {
                const baseURL = 'https://avataaars.io/?avatarStyle=Circle';
                const params = {
                    topType: $('#topType').val(),
                    accessoriesType: $('#accessoriesType').val(),
                    hairColor: $('#hairColor').val(),
                    facialHairType: $('#facialHairType').val(),
                    clotheType: $('#clotheType').val(),
                    eyeType: $('#eyeType').val(),
                    eyebrowType: $('#eyebrowType').val(),
                    mouthType: $('#mouthType').val(),
                    skinColor: $('#skinColor').val()
                };
                const url = '${baseURL}&topType=${params.topType}&accessoriesType=${params.accessoriesType}&hairColor=${params.hairColor}&facialHairType=${params.facialHairType}&clotheType=${params.clotheType}&eyeType=${params.eyeType}&eyebrowType=${params.eyebrowType}&mouthType=${params.mouthType}&skinColor=${params.skinColor}';
                $('#avatarImage').attr('src', url);
            }

            generateURL();
            $('select').change(function() {
                generateURL();
            });

[grigorasvalentin]

i riceiving cors error when trying to fetch data from https://avataaars.io. How do i resolve? Access to fetch at 'https://avataaars.io/?avatarStyle=Circle&topType=NoHair&facialHairType=Blank&skinColor=Light&eyeType=Default&eyebrowType=Default&clotheType=BlazerShirt&mouthType=Smile&accessoriesType=Blank' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. My server is already configured to send 'Access-Control-Allow-Origin:*

[MaximVerb]

i riceiving cors error when trying to fetch data from https://avataaars.io. How do i resolve? Access to fetch at 'https://avataaars.io/?avatarStyle=Circle&topType=NoHair&facialHairType=Blank&skinColor=Light&eyeType=Default&eyebrowType=Default&clotheType=BlazerShirt&mouthType=Smile&accessoriesType=Blank' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. My server is already configured to send 'Access-Control-Allow-Origin:*

I had the same issue at first, it has to do with the ssl signing of the page, what framework are you using?

[grigorasvalentin]

i'm using codeigniter 4. Every time you use fetch(), Ajax jquery, or even xmlHttpRequest methods to fetch data, the cors policy is triggered, and i was not able to find an working solutions anywhere.

I had to change my fetch logic, and instead of using those methods to fetch the avatar, i fetched it directly inside src attribute: img src='https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light'

So just read all the selected values from the form, put them together, and then pass it or dynamically change the image src attribute using javascript.

Just remember, browsers allow images, scripts, and stylesheets to be requested from any origin without triggering CORS policies