https://github.com/wave-charts/avatar-gen

一个随机头像生成器的纯前端实现
https://github.com/wave-charts/avatar-gen

avatar vue

Last synced: about 2 hours ago
JSON representation

一个随机头像生成器的纯前端实现

• Host: GitHub
• URL: https://github.com/wave-charts/avatar-gen
• Owner: wave-charts
• License: mit
• Created: 2021-01-12T08:49:16.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-07-25T02:57:20.000Z (6 months ago)
• Last Synced: 2025-01-01T12:01:59.710Z (7 days ago)
• Topics: avatar, vue
• Language: Vue
• Homepage: https://avatar.oooo.so/
• Size: 6.19 MB
• Stars: 523
• Watchers: 5
• Forks: 32
• Open Issues: 0
• Metadata Files:
  • Readme: README-EN.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[简体中文](./README.md) | English

![](https://img.shields.io/node/v/html2canvas) ![](https://img.shields.io/npm/l/html2canvas) ![](https://img.shields.io/github/last-commit/wave-charts/avatar-gen)

# Avatar Genrator

## Introduction

A web platform to create random avatar,

Live demo: [https://avatar.waveapp.cn](https://avatar.waveapp.cn)

Preview: 

![](./assets/doc/mobile-preview-en.gif)

## Run

> base on `[email protected]`,  make sure that `node` has been installed on your device

1. clone repository

```bash

git clone https://github.com/wave-charts/avatar-gen.git

cd chart-gen

```

2. run project

**Run with Yarn**

```bash

yarn

yarn serve

```

**Run with npm**

```bash

npm install

npm run serve

```

## Custom

> These resource in project can be found at Figma community: [https://www.figma.com/community/file/829741575478342595/Avatar-Illustration-System](https://www.figma.com/community/file/829741575478342595/Avatar-Illustration-System)

```ts

export const avatarConfig: Record = {

  // 头

  Base: [

    {

      id: 1,  // 素材文件夹下的文件名， eg: `src/views/resource/Base/1.vue`

      colorLib: colorLib.skin,  // 可用颜色的集合

      weight: 5,  // 权重，影响出现的概率

    },

  ],

  // 耳朵

  Ear: [

    {

      id: 1,  // eg: `src/views/resource/Ear/1.vue`

      colorRefer: "Base", // 设置颜色跟随， eg: Ear 的颜色跟随 Base (即耳朵的颜色和头保持一致)

      weight: 1,

    },

    {

      id: 2,  // eg: `src/views/resource/Ear/2.vue`

      colorRefer: "Base",

      weight: 1,

    },

  ],

  ...

};

```