named avatar
Avatar generated by name text based on svg.
Fill <svg>
as data uri into the <img>
src, no added element.
如果用户没有个性头像,就填充用户名生成的<svg>
头像。
程序会在 <img src>
上填充data URI,没有额外添加元素。
Installtion
npm install namedavatar --save
Usage
namedavatar is a UMD module, support Browser, Requirejs, Vue2 directive, miniprogram(小程序).
Browser
NOTE that the
<img>
width
andborder-radius: 100%
requires you additional settings, the program is not set.
<!-- also support requirejs<script>requirejs.config({ paths: { namedavatar: '/dist/namedavatar' }})requirejs('namedavatar', function(namedavatar){ // ...})</script>-->
if img.src
invalid, img#avatar1
will be:
without DOM
support like miniprogram(小程序)
// create svg html string without DOMconst svg = namedavatarconst uri = namedavatarconsole// data:image/svg+xml,%3Csvg%20...
Vue2
online example main.js
// register v-avatar="Tom Hanks", show firstName (default)Vue; // or set options and same as above// register v-avatar="Tom Hanks", show lastNameVue
in vue template
API
.config(Object options)
filed | type | default | description |
---|---|---|---|
nameType | string | 'firstName' |
pick from: firstName , lastName , initials |
fontFamily | string | 'Verdana, Geneva, sans-serif' |
font family |
backgroundColors | Array | Material Design colors *-500 | random background color list |
textColor | string | '#FFF' |
name text color |
minFontSize | number | 8 |
min font size limit |
maxFontSize | number | 16 |
max font size limit |
.getSVG(string name, Object options)
name
the full name valueoptions
extended options
return <svg>
node, get string by svg.outerHTML
.getSVGString(string name, Object options)
added at 1.1.0 version, special for without DOM like miniprogram(小程序)
name
the full name valueoptions
extended options
return <svg>
html string
.setImg(HTMLImageElement img, string name)
img
<img>
itemname
the full name value
create svg by name
, and fill to <img src="data:image/svg+xml,<svg>...">
.setImgs(HTMLImageElement[] imgs, string attr)
imgs
<img>
listattr
pick full name value from special attr, eg'alt'
,'data-name'
create svg by attr
value, batch processing setImg()
.getDataURI(string html)
html
<svg>
node html string
get data uri (rfc2397) of svg html
Contributing
- IE > 8 (based on svg)
- Continuous improvement, welcome review and suggest
development
npm install -g watchifynpm run dev
build assert
npm install -g browserify uglifyjs # build UMD bundle and minify npm run build && npm run minify # build for vue npm run build:vue
unit test:
npm install -g mochanpm run test