首页 > 其他分享 >一个纯前端实现的头像生成网站

一个纯前端实现的头像生成网站

时间:2024-08-02 09:51:28浏览次数:8  
标签:5173 vue color 前端 生成 头像 avatar docker

大家好,我是 Java陈序员

今天,给大家介绍一个纯前端实现的头像生成网站。

关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

vue-color-avatar —— 一款基于 Vite + Vue3 实现的矢量风格头像的生成器,你可以搭配不同的素材组件,生成自己的个性化头像。

功能特色:

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

项目截图

快速上手

本地开发

1、克隆代码

git clone https://github.com/Codennnn/vue-color-avatar.git

2、安装依赖

yarn install

3、运行项目

yarn dev

4、构建项目

yarn build

生产部署

vue-color-avatar 支持 Docker 部署,可使用 Docker 进行私有化部署。

1、直接启动容器

docker run -d -t -p 5173:5173 \
--name=vue-color-avatar \
--restart=always \
docker.io/wenyang0/vue-color-avatar:latest

2、手动构建镜像

#下载代码
git clone https://github.com/Codennnn/vue-color-avatar.git

#docker 编译
cd vue-color-avatar/
docker build -t vue-color-avatar:v1 .

#启动服务
docker run -d -t -p 5173:5173 --name vue-color-avatar --restart=always vue-color-avatar:v1

3、最后,打开浏览器访问服务的地址 http://serverIP:5173 即可。

最后

推荐的开源项目已经收录到 GitHub 项目,欢迎 Star

https://github.com/chenyl8848/great-open-source-project

或者访问网站,进行在线浏览:

https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!

标签:5173,vue,color,前端,生成,头像,avatar,docker
From: https://www.cnblogs.com/codechen8848/p/18337451

相关文章

  • 一句JS代码,实现随机颜色的生成
    今天我们只用一句JS代码,实现随机颜色的生成,首先看一下效果:每次刷新浏览器背景颜色都不一样实现此效果的JS函数 :letrandomColor=()=>...:定义一个箭头函数randomColor,用于生成一个随机颜色。Math.random():生成一个0到1之间的随机数。Math.random()*0xffff......
  • 合并数组操作:现有如下一个数组: int oldArr[]={1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5} 要求
    思路:确定出不为0的个数,这样可以开辟新数组;从旧的数组之中,取出内容,并将其赋给新开辟的数组。如果判断到0,就使用continue关键字。注意,合并成一个新的小数组后,i和j不能同步遍历,当continue跳过旧数组0的遍历后,j不跟随i++的增加而变化,而是把j++放程序的最下面,每遍历一个不为0的......
  • 如何在Scrapy中下载根据Cookies url生成的文件
    我正在尝试下载一个文件,该文件的下载链接是根据某些Cookie生成的。我有一个PDF文件,显示在查看器中,该查看器有一个下载按钮当我单击此图标时,会根据HTML中的hidden_​​document_field_id输入值生成临时下载链接,因此本例中的临时下载链接是......
  • 在 Python 生成器中使用“with”语句管理资源
    今天,在编程时,我发现自己在生成器函数内管理资源(ssh连接),类似于以下内容:def_yield_fname(host_address,usr,pwd,datapath):withparamiko.SSHClient()asssh_client:ssh_client.set_missing_host_key_policy(paramiko.AutoAddPolicy())ssh_client.......
  • Synthesia——虚拟人物视频生成
    一、Synthesia介绍Synthesia是一个基于人工智能的视频生成平台,主要用于创建高质量的虚拟人物视频。它利用先进的深度学习和计算机视觉技术,生成真实感极强的虚拟人形象,可以用于广告、教育、企业培训等多个领域。Synthesia的主要功能虚拟人物视频生成:用户只需提供文本脚本,S......
  • 【愚公系列】《短视频生成与剪辑实战》005-使用 Midjourney 进行 Al 绘图
    ......
  • 前端使用 Konva 实现可视化设计器(19)- 连接线 - 直线、折线
    本章响应小伙伴的反馈,除了算法自动画连接线(仍需优化完善),实现了可以手动绘制直线、折线连接线功能。请大家动动小手,给我一个免费的Star吧~大家如果发现了Bug,欢迎来提Issue哟~github源码gitee源码示例地址模式切换前置工作连接线模式种类//src/Render/types.tse......
  • SOTA、生成/判别模型
    SOTA模型"SOTA"是"StateoftheArt"的缩写,翻译成中文是“最先进的”,“尖端技术”或“行业领先”。在科技和研究领域,当提到某个产品、技术或模型是“SOTA”,意味着它代表了当前该领域最高的成就水平,通常是性能最优或技术最新的。在深度学习和机器学习领域,一个被称为SOTA的......
  • js reduce 根据sku属性生成sku
    如何使用JavaScript中的reduce函数来生成SKU属性的SKU。SKU(StockKeepingUnit)通常用于唯一标识商品或库存。假设你有一个包含商品属性的数组,例如:constproperties=[{name:'颜色',value:'红色'},{name:'尺寸',value:'XL'},{name:'材质',valu......
  • 【常用技能】截取整个网页并生成图片
    【常用技能】截取整个网页并生成图片    一、环境说明: 1、浏览器:chrome 2、环境:在浏览器中,打开要被截图的网页。    二、截图步骤 1、【进入调试界面】:F12,进入浏览器调试页面; 2、【进入Network选项卡】:选择选项卡“Network”; ......