Skip to content

🤡 An npm package to generate avatar data-url on both client & server-side, using text.

License

Notifications You must be signed in to change notification settings

devblin/davatar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Davatar

codecov npm version npm

🤡 An npm package to generate avatar data-url on both client & server side, using text.

https://nodei.co/npm/davatar.png?downloads=true&downloadRank=true&stars=true

Contents

Installation

npm install davatar

Usage

Import module as given below:

/*
Generated imageDataUrl can be used in <img> tag 
Or can be viewed directly through browser.
*/
const { davatar } = require("davatar");
const imageDataUrl50 = davatar.generate({size:50, text:"deepanshu dhruw", textColor:"blue", backgroundColor:"orange"});

Generated Image-Data-URL:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAACQElEQVRoge2YTUgUUQCAv9ltN3W32HVkw9LNFqJTkLhtEWQeDFqDfpAg6lDgoTwEGdExpD0FkYcO1sHoUgTRL6RBHvo5FIulYFCXFhstaWu1H1uXXdfp1CI4xAgz02t53/Hx+HgfM/Nm3ij6dXTKANe/XoBVyBDRkCGiIUNEQ4aIhgwRDRkiGjJENJaZmdQz0EV+zrto3OMuEPRN09gwzMb6UdyuoiMeIxQzB6sVHT+Zyfn/Okf1ZzjeeplT8YtU+6ds9RixpJADW27RtO5VaTybr0L7GubJ2xbGvjQAEFY1bp9sJxoZss1jhKlb6w9tm/o52nxt0biuKzx4vYfOq71omTC7zj8imYgRCaVs9SzEkoddUXT2Nt0nmYhRG5gkM6NyrO+Kox5Ld6266gkuHTkBwOCbVoZSUcc8lm+/+zffZXXwEwAPR3Y75rE8xKXMs33DcwCS72OOeWx5IYZrNADSP0KOeWwJqfDkAJjNVzrmsSXk8/dVANQGJh3z2BKSSkdML8Aqj+Uh37IBnr1rBjD9VrbCY3lI72An+TkvbleRfdF7jnksDRkea+TcnbMAHNp2g7CqOeaxJGRed3HzxUF2JJ6SK1SwJviRC4dPO+pZ0kdj/0hbaScBKBQ9TEzV8Xh0Z+nBrFfHGTgTJ7QybbtnIZadR3zLf9HR0kd3ezdB37StHiNMXZGueI/hya7SO8vamg+EVY2t619S5c064jHC1BX5Hyibnw8yRDRkiGjIENGQIaIhQ0RDhohG2YT8BpZRJq7xHedTAAAAAElFTkSuQmCC

Open the generated Image-Data-URL in the browser; you'll see the following image:

In React.js

import React from "react";
const { davatar } = require("davatar");

function App() {
	const imageDataUrl = davatar.generate({
		size: 50,
		text: "deepanshu dhruw",
		textColor: "red",
		backgroundColor: "cyan",
	});
	return <img src={imageDataUrl} alt="image"></img>;
}

export default App;

Run the react-app and you will see below image:

Parameters:

Parameter Type Values Default
size (Optional) Integer 1 - 512 64
text (Required) String More than 2 characters
textColor (Optional) String Color Format Random RGB Value
backgroundColor (Optional) String Color Format Random RGB Value
fontFamily (Optional) String Font Family "Arial"
fontWeight (Optional) Integer 100 - 900 100

Examples

EXAMPLE-1

Generating 64×64 (px) dimension image, with custom parameters:

const { davatar } = require("davatar");
const imageProperty = {
    size: 64,
    text: "John Doe",
    textColor: "red",
    backgroundColor: "green",
    fontFamily: "monospace",
    fontWeight: 600
}
const imageDataUrl = davatar.generate(imageProperty);


EXAMPLE-2

Generating default dimension image, with default parameters:

const { davatar } = require("davatar");
const imageProperty = { text: "John Doe" }
const imageDataUrl = davatar.generate(imageProperty);

Random textColor & backgroundColor:


EXAMPLE-3

Generating 128×128 (px) dimension image, with default parameters:

const { davatar } = require("davatar");
const imageProperty = { size: 128, text: "dd" }
const imageDataUrl = davatar.generate(imageProperty);

Random textColor & backgroundColor:

Tests

npm test

License

MIT