Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
org.webjars.npm:material-avatar
Advanced tools
Simple material design avatars using canvas
====
Material-Avatar is non-opinionated and only has a few small features. It was built to solve a larger problem. How can I generate a good looking default avatar for a user?.
I got asked this question once, and there are a lot of other more complex implimentations out there, using bits and bobs to calculate a pixelated image, or grab sets of images from places, or use other web services. I like the way google approached the problem, creating a simple image with initials text.
Material-Avatar uses HTML5 Canvas to fill an element with a random(ized) background color, which uses this great module to find nice random colors, but has a fall-back just incase you don't include it.
Now Supports jQuery!
Install using npm, bower, or download.
npm install --save material-avatar
bower install --save material-avatar
And include your scripts,
<script src="vendor/material-avatar/material-avatar.min.js"></script>
Create a nice div and fill it with a name, or use the attribute data-name. Note, material-avatar defaults to using the size provided by the style of the element on the page
<div class="default-profile-photo" style="height:200px; width:200px;">
Paul Gilbert
</div>
Call MaterialAvatar in somewhere on your page.
<script>
MaterialAvatar(document.getElementsByClass('default-profile-photo'), options);
//or use jQuery
$('.default-profile-photo').materialAvatar(options);
</script>
Profit.
EffectName: "default" (type)
Description
shape "square" (string)
Can either be "circle" or "square", and will take that shape (more shapes in future updates!)
randomColor (object)
Settings for using the randomColor library
backgroundColor (string)
A hex string for a background color (i.e. '#f12a27'). If not set, one will be chosen at random, or from
a default colorPalette (which can be overridden)
textColor (string)
A hex string for the text color (i.e. '#fff'). If not set, an accessable friendly color will be chosen
based on the background color (either '#222' or '#fff')
colorPalette (array)
An array of color hexes that can will be chosen from randomly as a fallback. Defaults can be found in
the material-avatar.js file.
fontSize (number or function)
An overriding size for font. This can either be a number, measured in px, or a function. If its a function,
it will be sent two arguments, the height of the canvas, and the initials length, which can be used to
return a calculated font size.
fontFamily "Arial" (string)
The chosen font family for generating the canvas initials font.
initials (string)
A string of characters used as the initials for the avatar.
name (string)
In addition to being able to use the data-name attribute, or the innerHtml of an element, you can also pass
a name in the options, which will be broken down into the initial.
see sample or the live website for some examples.
If you'd like to develop this little module a bit further, I use a nice gulp build process.
Get a localhost live-reload web-server running to develop the module
npm install
gulp serve
Before you push your changes, make sure to run the gulp build script
gulp build
MIT
FAQs
WebJar for material-avatar
We found that org.webjars.npm:material-avatar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.