今天推薦一款開源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