js-avatar-generator

A simple lightweight package to generate profile / avatar images (based on name || using initials) for your webApp.

Usage no npm install needed!

<script type="module">
  import jsAvatarGenerator from 'https://cdn.skypack.dev/js-avatar-generator';
</script>

README

A simple lightweight package to generate profile / avatar images (based on name || using initials) for your webApp.

Please refer the examples below to see the sample outputs.

NOTE : This package uses canvas and other browser API's to get the task done, Please use this only and only in browser env.

How to Use

  • Install the package

    npm install avatar-generator
    
  • Import the module

    import { avatarGen } from "avatar-generator"
    
  • Calling the function

    avatarGen({
        name: "NAME" // ideally first name and last name (eg: name: "Sankshit Pandoh"),
        backgroundColor: "#1ed3qs" // accepts hex, color name and rgb
        fontColor : "#FFF" // accepts hex, color name and rgb,
        size: "300" // gets converted into pixels. the final image height and width
    })
    
    // This will return a base64 string which can be used inside the src of the img tag.
    

Default values and Info

  • name : This key is required, without this the lib will return an exception
  • backgrounColor: Optional | if no value is entered, a random color is gen
  • fontColor: Optional | if no value is entered, its value defaults to #FFF
  • size: Optional | if no value is entered, its values defaults to 200 (in px)

Examples:

Example 1

  • Input:

    avatarGen({
        name: "Sankshit Pandoh"
    })
    
  • Output :

image1 image2

Example 2

  • Input:
    avatarGen({
        name: "Sankshit"
    })
    
  • Output:
image3

Example 3

  • Input:
    avatarGen({
        name: "Sankshit Pandoh",
        backgroundColor: "#000"
    })
    
    
  • Output:
image4

Example 4

  • Input:
    avatarGen({
        name: "Sankshit Pandoh",
        backgroundColor: "#fff"
        fontColor: "#000"
    })
    
    
  • Output:
image5