🎨 Wali Avatar

一个基于种子值的卡通风格和像素风格SVG头像生成器，使用原生JavaScript开发，适用于Web端应用。

✨ 特性

• 🎯 基于种子值: 相同的种子值总是生成相同的头像，确保一致性
• 🎨 双重风格: 支持卡通风格和像素风格两种设计风格
• 📦 轻量级: 纯JavaScript实现，无外部依赖
• 🖼️ SVG格式: 矢量图形，支持任意缩放不失真
• 🎛️ 高度可定制: 支持自定义大小、背景颜色、风格、内边距等参数
• 🌐 多环境支持: 支持ES6模块、CommonJS和浏览器直接使用
• ⚡ Vue支持: 提供开箱即用的Vue组件
• 🔧 内边距: 支持自定义内边距，让头像更美观

📦 安装

npm install wali-avatar

🚀 快速开始

ES6 模块使用

import { createAvatar } from 'wali-avatar';

// 创建卡通风格头像
const avatar = createAvatar({
    seed: 'user123',
    size: 100,
    style: 'cartoon',
    backgroundColor: '#f0f0f0'
});

// 创建像素风格头像
const pixelAvatar = createAvatar({
    seed: 'user123',
    size: 100,
    style: 'pixel',
    backgroundColor: '#f0f0f0'
});

// 带内边距的头像
const paddedAvatar = createAvatar({
    seed: 'padded-avatar',
    size: 120,
    style: 'cartoon',
    backgroundColor: '#f0f0f0',
    padding: 15  // 15像素内边距
});

// 渲染到页面元素
avatar.renderTo('#avatar-container');

// 或者获取SVG字符串
const svgString = avatar.generate();
console.log(svgString);

// 获取Data URL（可用于img标签的src）
const dataUrl = avatar.toDataURL();

浏览器直接使用

<script src="https://unpkg.com/wali-avatar/dist/index.min.js"></script>
<script>
    const avatar = new WaliAvatar({
        seed: 'hello-world',
        size: 100,
        style: 'cartoon',
        padding: 10
    });
    
    document.body.innerHTML = avatar.generate();
</script>

🔧 Vue组件使用

Vue 3

import { createApp } from 'vue';
import { WaliAvatarPlugin } from 'wali-avatar';

const app = createApp({});
app.use(WaliAvatarPlugin);

<template>
  <!-- 基础使用 -->
  <wali-avatar></wali-avatar>
  
  <!-- 自定义参数 -->
  <wali-avatar 
    seed="user-123"
    :size="120"
    style="cartoon"
    background-color="#ff6b6b"
    :padding="10"
  ></wali-avatar>
  
  <!-- 响应式头像 -->
  <wali-avatar 
    seed="responsive"
    :size="150"
    :responsive="true"
    :padding="8"
    @generated="onAvatarGenerated"
  ></wali-avatar>
</template>

<script>
export default {
  methods: {
    onAvatarGenerated(info) {
      console.log('头像生成完成:', info.svg, info.dataUrl);
    }
  }
};
</script>

Vue 2

import Vue from 'vue';
import { WaliAvatarPluginVue2 } from 'wali-avatar';

Vue.use(WaliAvatarPluginVue2);

Vue组件属性

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | size | Number | 100 | 头像尺寸 | | seed | String | 随机字符串 | 生成种子 | | backgroundColor | String | '#f0f0f0' | 背景颜色 | | style | String | 'cartoon' | 头像风格 | | padding | Number | 0 | 内边距 | | responsive | Boolean | false | 是否响应式 |

Vue组件事件

| 事件 | 参数 | 描述 | |------|------|------| | generated | { svg, dataUrl } | 头像生成完成时触发 |

CommonJS 使用

const { createAvatar } = require('wali-avatar');

const avatar = createAvatar({
    seed: 'nodejs-user',
    size: 200
});

const svgContent = avatar.generate();

🎛️ API 参考

构造函数选项

| 参数 | 类型 | 默认值 | 描述 | |------|------|--------|------| | seed | string | 随机字符串 | 用于生成头像的种子，相同种子产生相同头像 | | size | number | 100 | 头像尺寸（像素） | | backgroundColor | string | '#f0f0f0' | 背景颜色 | | style | string | 'cartoon' | 头像风格，可选 'cartoon' 或 'pixel' | | padding | number | 0 | 内边距（像素），为头像添加内边距 |

const options = {
    seed: 'string',           // 种子值，决定头像的样式（默认：随机字符串）
    size: 100,               // 头像大小，单位像素（默认：100）
    style: 'cartoon',        // 头像风格：'cartoon' 或 'pixel'（默认：'cartoon'）
    backgroundColor: '#f0f0f0', // 背景颜色（默认：'#f0f0f0'）
    padding: 0               // 内边距（默认：0）
};

方法

generate()

生成并返回SVG字符串。

const svgString = avatar.generate();

renderTo(element)

将生成的头像渲染到指定的DOM元素中。

// 使用选择器
avatar.renderTo('#avatar-container');

// 使用DOM元素
const element = document.getElementById('avatar-container');
avatar.renderTo(element);

toDataURL()

返回头像的Data URL，可直接用于img标签的src属性。

const dataUrl = avatar.toDataURL();
document.getElementById('img').src = dataUrl;

🎨 头像特性

生成的头像包含以下随机元素：

• 脸型: 圆形脸部，随机颜色
• 发型: 短发、卷发、长发等多种样式
• 眼睛: 圆眼、椭圆眼、眯眯眼等
• 嘴巴: 微笑、大笑、小嘴、惊讶等表情
• 配饰: 30%概率生成眼镜
• 颜色: 15种预设的和谐色彩搭配

📝 使用示例

为用户生成一致的头像

import { createAvatar } from 'wali-avatar';

function generateUserAvatar(userId) {
    return createAvatar({
        seed: `user_${userId}`,
        size: 80,
        style: 'cartoon',
        backgroundColor: '#ffffff'
    });
}

// 用户ID为123的用户总是会得到相同的头像
const userAvatar = generateUserAvatar(123);
userAvatar.renderTo('#user-avatar');

批量生成头像

const users = ['alice', 'bob', 'charlie', 'diana'];

users.forEach(username => {
    const avatar = createAvatar({
        seed: username,
        size: 60
    });
    
    const container = document.createElement('div');
    container.className = 'user-avatar';
    document.body.appendChild(container);
    
    avatar.renderTo(container);
});

下载头像为文件

function downloadAvatar(seed, filename) {
    const avatar = createAvatar({ seed, size: 200 });
    const svg = avatar.generate();
    
    const blob = new Blob([svg], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = filename || 'avatar.svg';
    a.click();
    
    URL.revokeObjectURL(url);
}

downloadAvatar('my-avatar', 'my-custom-avatar.svg');

🛠️ 开发

# 克隆项目
git clone https://github.com/yourusername/wali_avatar.git
cd wali_avatar

# 安装依赖
npm install

# 构建项目
npm run build

# 开发模式（监听文件变化）
npm run dev

📄 许可证

MIT License

🤝 贡献

欢迎提交Issue和Pull Request！

🔗 相关链接

• GitHub仓库
• NPM包
• 在线演示