卡通头像生成器Avataaars generator

在这里插入图片描述

什么是 Avataars generator ?

Avataars generator 是一款简易的、基于 web 的卡通头像生成器。可以自定义衣服、头发、情感、配饰和颜色等参数。

什么是 Sketch ?

Sketch 是一款适用于所有设计师的矢量绘图应用,是为图标设计和界面设计而生的。【百度百科】

原始的 Sketch 图库可以在 https://www.avataaars.com 获取到

在这里插入图片描述
在这里插入图片描述

官方的演示地址:https://getavataaars.com/

构建镜像

如果你不想自己构建,可以跳过,直接阅读下一章节

老苏是基于源代码构建的 Dockerfile

FROM node:lts-alpine as build-base
LABEL maintainer=laosu<wbsu2003@gmail.com>

WORKDIR /app
COPY . .
COPY tsconfig.json tsconfig.prod.json
RUN npm install --registry=https://registry.npm.taobao.org
RUN npm run build

FROM nginx:1.12-alpine
COPY --from=build-base /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

构建镜像和容器运行的基本命令如下👇

# 下载原代码
git clone https://github.com/fangpenlin/avataaars-generator.git

# 如果 github 慢或者访问不了
git clone https://hub.fastgit.org/fangpenlin/avataaars-generator.git

# 进入目录
cd avataaars-generator

# 构建镜像
docker build -t wbsu2003/avataaars-generator:v1 .

# 生成容器
docker run -d \
--name=avataaars-generator \
-p 3490:80 \
wbsu2003/avataaars-generator:v1

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 avataaars ,选择第二个 wbsu2003/avataaars-generator,版本选择 latest

在这里插入图片描述

端口

本地端口不冲突就行

本地端口容器端口
349080

在这里插入图片描述

运行

在浏览器中输入 http://群晖IP:3490 就能看到主界面

在这里插入图片描述

有两种玩法,一种是点右上角的 Random 生成随机的头像,直到你满意为止;另一种是按自己的逐项设定来生成头像,可以调节发型、眼镜、肤色、衣着、嘴型等属性。

老苏逐项调整后生成的自己的系列头像

你要想看老苏以前的头像,可以请移步到 ➡️ https://laosu.ml/about/ ,欢迎鉴赏😁

生成的图片可以下载为 PNGSVG 格式的图片

也可以嵌入到 React 或者 Html 代码中

结语

最近多了很多新的朋友,再唠叨一下,大家有什么建议或者想看的,可以通过👇下面的方式告诉老苏,老苏会尽量满足大家:

  • 给公众号发消息。虽然老苏的公众号并不支持留言,并且还有很多限制,但聊胜于无
  • 点『 阅读原文 』 去老苏的博客 (https://laosu.ml) 留言,这也是老苏推荐的方式
  • 发邮件:wbsu2003@gmail.comwbsu2003@hotmail.com,不过现在邮件用的比较少,可能回复比较慢

今天周末,发个水文轻松一下!下周一再见。

参考文档

fangpenlin/avataaars-generator: Simple generator React app for avataaars
地址:https://github.com/fangpenlin/avataaars-generator

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨浦老苏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值