今天推荐一款开源Q版头像生成器 Avataaars generator,支持自定义头发、眼镜、胡须、肤色、衣着、嘴型等属性,如果你想换个人物化的头像,可以来试一下。
下面是一些头像示例,可以看到是偏有趣、搞笑的卡通风格:
当你完成个性化设置之后,可以导出PNG、SVG格式的图片,也支持作为图片嵌入使用,甚至可以在React中使用官方提供的React组件来展示头像。
在线地址:https://getavataaars.com/
打开网站后,你可以点击网站右上角的 Random 按钮,随机生成一款头像。
源码地址:https://github.com/fangpenlin/avataaars-generator
作为一款前端项目,检出源码后执行以下命令(需要node.js环境):
// 首次安装依赖
npm install
// 启动项目
npm start
React组件使用方式如下:
首先安装:
// 安装
npm install avataaars --save
然后嵌入组件:
import * as React from 'react'
import Avatar from 'avataaars'
export default class MyComponent extends React.Component {
render () {
return
<div>
Your avatar:
<Avatar
style={{width: '100px', height: '100px'}}
avatarStyle='Circle'
topType='LongHairMiaWallace'
accessoriesType='Prescription02'
hairColor='BrownDark'
facialHairType='Blank'
clotheType='Hoodie'
clotheColor='PastelBlue'
eyeType='HAppy'
eyebrowType='Default'
mouthType='Smile'
skinColor='Light'
/>
</div>
}
}
代码在此:https://github.com/fangpenlin/avataaars