js-avatar-generator

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 :

---

Example 2

• Input:

  avatarGen({
      name: "Sankshit"
  })
  

• Output:

---

Example 3

• Input:

  avatarGen({
      name: "Sankshit Pandoh",
      backgroundColor: "#000"
  })
  
  

• Output:

---

Example 4

• Input:

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

• Output: