Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
虎纹鲨鱼
avatar
提交
8844b9b4
A
avatar
项目概览
虎纹鲨鱼
/
avatar
通知
4
Star
255
Fork
105
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
avatar
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8844b9b4
编写于
7月 28, 2022
作者:
L
LeoKu
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Support single download
上级
7a9fd610
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
63 addition
and
4 deletion
+63
-4
README-EN.md
README-EN.md
+1
-1
README.md
README.md
+1
-1
src/components/Modal/BatchDownloadModal.vue
src/components/Modal/BatchDownloadModal.vue
+59
-0
src/i18n/locales/en/index.ts
src/i18n/locales/en/index.ts
+1
-1
src/i18n/locales/zh/index.ts
src/i18n/locales/zh/index.ts
+1
-1
未找到文件。
README-EN.md
浏览文件 @
8844b9b4
...
...
@@ -25,7 +25,7 @@ Features you might be interested in:
-
Randomly generate an avatar
-
Redo/Undo
-
i18n
-
Download multiple
-
Generate multiple avatars in batch
## Assets
...
...
README.md
浏览文件 @
8844b9b4
...
...
@@ -25,7 +25,7 @@
-
随机生成头像,有一定概率触发彩蛋
-
撤销/还原
*更改*
-
国际化多语言
-
批量
下载
多个头像
-
批量
生成
多个头像
## 设计资源
...
...
src/components/Modal/BatchDownloadModal.vue
浏览文件 @
8844b9b4
...
...
@@ -37,6 +37,10 @@
:
style
=
"
{ opacity: making && i + 1 > madeCount ? 0.5 : 1
}
"
>
<
VueColorAvatar
:
id
=
"
`avatar-${i
}
`
"
:
option
=
"
opt
"
:
size
=
"
280
"
/>
<
button
class
=
"
download-single
"
@
click
=
"
handleDownload(i)
"
>
{{
t
(
'
action.download
'
)
}}
<
/button
>
<
/div
>
<
/template
>
<
/div
>
...
...
@@ -70,6 +74,27 @@ const { t } = useI18n()
const
making
=
ref
(
false
)
const
madeCount
=
ref
(
0
)
async
function
handleDownload
(
avatarIndex
)
{
const
avatarEle
=
window
.
document
.
querySelector
(
`#avatar-${avatarIndex
}
`
)
if
(
avatarEle
instanceof
HTMLElement
)
{
const
html2canvas
=
(
await
import
(
'
html2canvas
'
)).
default
const
canvas
=
await
html2canvas
(
avatarEle
,
{
backgroundColor
:
null
,
}
)
const
dataURL
=
canvas
.
toDataURL
()
const
trigger
=
document
.
createElement
(
'
a
'
)
trigger
.
href
=
dataURL
trigger
.
download
=
`${appName
}
.png`
trigger
.
click
()
}
recordEvent
(
'
click_download
'
,
{
event_category
:
'
click
'
,
}
)
}
async
function
make
()
{
if
(
props
.
avatarList
&&
!
making
.
value
)
{
making
.
value
=
true
...
...
@@ -183,9 +208,43 @@ async function make() {
padding
:
2
rem
;
.
avatar
-
box
{
position
:
relative
;
display
:
flex
;
align
-
items
:
center
;
justify
-
content
:
center
;
.
download
-
single
{
position
:
absolute
;
bottom
:
1
rem
;
left
:
50
%
;
z
-
index
:
10
;
display
:
flex
;
align
-
items
:
center
;
justify
-
content
:
center
;
min
-
width
:
6.6
rem
;
height
:
2.3
rem
;
margin
-
left
:
1
rem
;
padding
:
0
1
rem
;
color
:
var
.
$color
-
text
;
font
-
weight
:
bold
;
letter
-
spacing
:
0.1
rem
;
background
:
var
.
$color
-
gray
;
border
-
radius
:
0.4
rem
;
border
-
radius
:
0.6
rem
;
transform
:
translateX
(
-
50
%
);
cursor
:
pointer
;
opacity
:
0
;
transition
:
color
0.2
s
;
user
-
select
:
none
;
&
:
hover
{
color
:
lighten
(
var
.
$color
-
text
,
10
);
}
}
&
:
hover
.
download
-
single
{
opacity
:
1
;
}
}
}
}
...
...
src/i18n/locales/en/index.ts
浏览文件 @
8844b9b4
...
...
@@ -40,7 +40,7 @@ export default {
text
:
{
codeModalTitle
:
'
Code
'
,
downloadTip
:
'
LONG PRESS or RIGHT CLICK to save
'
,
downloadMultiple
:
'
Download
'
,
downloadMultiple
:
'
Download
All
'
,
downloadingMultiple
:
'
Downloading
'
,
downloadMultipleTip
:
'
Automatically generated
'
,
regenerate
:
'
Regenerate
'
,
...
...
src/i18n/locales/zh/index.ts
浏览文件 @
8844b9b4
...
...
@@ -40,7 +40,7 @@ export default {
text
:
{
codeModalTitle
:
'
配置代码
'
,
downloadTip
:
'
长按图片或右键点击下载至本地相册
'
,
downloadMultiple
:
'
开始下载
'
,
downloadMultiple
:
'
下载全部
'
,
downloadingMultiple
:
'
正在下载
'
,
downloadMultipleTip
:
'
已为你自动生成头像
'
,
regenerate
:
'
换一批
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录