分享一个 Vue3 + Vite 开发的纯前端在线头像生成网站 🥳

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1117 天前的主题，其中的信息可能已经有所发展或是发生改变。

Vue Color Avatar 预览截图头像样例

项目链接

在线预览：https://vue-color-avatar.vercel.app

GitHub 源码：https://github.com/Codennnn/vue-color-avatar

项目介绍

这是一款矢量风格头像的生成器，你可以搭配不同的素材组件，生成自己的个性化头像。

你可能感兴趣的功能：

可视化组件配置栏
随机生成头像，有一定概率触发彩蛋
撤销 /还原更改
国际化多语言

设计资源

设计师：@Micah on Figma
素材来源：Avatar Illustration System

附言

这个项目是我学习 Vue3 之后写第一个网站，里面有一些个人认为较好的代码实践，包括 Typescript 的应用和 ESLint + Prettier 的配置，希望对你有帮助。

喜欢的话请给这个项目一个 Star ⭐ 吧～

头像

avatar

Vue

47 条回复 • 2021-11-08 14:35:28 +08:00

wf18321589792

2021-10-22 11:05:56 +08:00

蛮有意思的。

zsxzy

2021-10-22 11:14:01 +08:00

配色挺好

DearMark

2021-10-22 11:25:51 +08:00

赏起来

itning

2021-10-22 11:27:21 +08:00

可以啊

iMusic

2021-10-22 11:34:38 +08:00

有点意思

ixoy

2021-10-22 11:57:26 +08:00

之前也看到过一个 notion 头像生成器 https://notion-avatar.vercel.app/zh
可参考参考

Livid

MOD

2021-10-22 12:00:16 +08:00

有没有考虑过做成 NFT Collection ？

yl20181003

2021-10-22 12:24:36 +08:00

挺有意思

galikeoy

2021-10-22 12:43:59 +08:00

UI 真不错

coolpace

2021-10-22 12:51:22 +08:00

@Livid [楼主回复]
抱歉，我还不知道什么是 NFT Collection，我先去搜索一下相关信息 😉

coolpace

2021-10-22 12:51:57 +08:00

@ixoy [楼主回复]
我开发的时候也参考了这个项目！~

Livid

MOD

2021-10-22 12:54:41 +08:00

@coolpace 比如这样的：

https://opensea.io/collection/cool-cats-nft

shuxhan

2021-10-22 13:01:01 +08:00

真不错

ALVC666

2021-10-22 13:17:51 +08:00

好！本搬砖狗表示让我实现可以但是让我去设计出来这么一个真的好难
毫无设计能力只知道好看还是不好看

Pyrex23

2021-10-22 13:57:09 +08:00 via iPhone

之前看到过一些一模一样的。。

https://github.com/holiday-lab/holiday-avatar

coolpace

2021-10-22 13:59:08 +08:00

@Livid [楼主回复]
非常酷！感谢提供的信息，我会去了解更多细节的

coolpace

2021-10-22 14:03:58 +08:00

@Pyrex23 [楼主回复#15]
嗯哼，这种风格的头像还挺受欢迎的

bankroft

2021-10-22 14:17:13 +08:00

针不戳

beiyu

2021-10-22 15:16:48 +08:00

很棒,喜欢楼主的设计风格．

stefanieewu

2021-10-22 16:40:12 +08:00

设计很喜欢，不过好像随机生成，只是在一个随机池里随便选一个？

coolpace

2021-10-22 17:05:09 +08:00

@stefanieewu [楼主回复#20]
可以这么理解，每个头像部位的选项都是一个数组定义，从数组里随机选取一个与其他部位进行组合

est

2021-10-22 17:41:04 +08:00

NFT 搞起来 2333

Remember

2021-10-22 19:04:55 +08:00

捏脸好评,可惜就是选项还是太少了,希望搞丰富一点

shilianmlxg

2021-10-22 19:58:43 +08:00 via iPhone

多谢大佬可以多学亿点点东西

tousfun

2021-10-22 20:12:59 +08:00 via iPhone

大佬为什么初学就能做出来这么好玩的项目啊？之前有前端经验吗

coolpace

2021-10-22 21:54:08 +08:00

@Remember [楼主回复#23]
看来大家都挺喜欢这种风格的头像，我准备找设计师画一波素材

coolpace

2021-10-22 21:54:33 +08:00

@919615766 [楼主回复#25]
我的主业是前端开发

leonleung

2021-10-23 17:33:00 +08:00

用这换了个波头像

coolpace

2021-10-23 20:59:55 +08:00

@leonleung [楼主回复#28]
谢谢支持，我计划近期再更新一波头像素材，可以关注我的项目获取最新状态哦

cond0r

2021-10-24 12:26:09 +08:00

用上了感谢楼主

lovegoogle

2021-10-24 20:56:33 +08:00

建议加上用上 GAN （生成对抗网络）随机生成各种有趣风格的图片 ^_^

yunyuyuan

2021-10-25 10:52:49 +08:00

我要是也认识一个设计朋友就好了，作为前端写的网站自己都不忍直视

coolpace

2021-10-25 11:04:32 +08:00

@lovegoogle [楼主回复#31]
赶紧查了查什么是对抗网络 🧐

coolpace

2021-10-25 11:05:40 +08:00

@yunyuyuan [楼主回复#32]
在模仿中慢慢培养审美吧哈哈

jinzhe

2021-10-26 01:01:33 +08:00

左边主界面出来滚动条有点丑

coolpace

2021-10-26 11:32:03 +08:00

@jinzhe [楼主回复#35]
正常情况是没有滚动条的，可以说下怎么复现吗？

six6pear

2021-10-26 17:08:30 +08:00

不错，很喜欢。就是现阶段素材太少，望完善。

starxg

2021-10-28 15:13:49 +08:00

很好！

lsorrow

2021-10-29 10:42:21 +08:00

胡子直接盖在嘴巴上了哈哈哈

jinzhe

2021-11-01 01:25:14 +08:00

@coolpace 直接打开就有了，macOS chrome macbook pro

t298

2021-11-01 15:49:21 +08:00

喜欢

uTuw2C6uf964Kx6o

2021-11-04 14:20:52 +08:00

风格不错

zzl22100048

2021-11-04 14:50:32 +08:00

随机生成比我自己捏的好看。。。

PEAL

2021-11-04 16:41:14 +08:00

爱了爱了

akakidz

2021-11-07 13:54:37 +08:00

cool

sakuno

2021-11-08 13:12:19 +08:00

用上了感谢楼主

chenz197

2021-11-08 14:35:28 +08:00

牛