diff --git a/README-EN.md b/README-EN.md
index 3ae5179da984a840066913fa747b18ba85798da9..004f8fb68719e1b5f1e37c0183f31a12c0058045 100644
--- a/README-EN.md
+++ b/README-EN.md
@@ -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
diff --git a/README.md b/README.md
index 8b0408a963499b53b2b4d067ee03075c9bd704af..b9dbdde1a5c385341e23d10aa155ff73292db15a 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@
- 随机生成头像,有一定概率触发彩蛋
- 撤销/还原*更改*
- 国际化多语言
-- 批量下载多个头像
+- 批量生成多个头像
## 设计资源
diff --git a/src/components/Modal/BatchDownloadModal.vue b/src/components/Modal/BatchDownloadModal.vue
index 68dae054643ebd1375e5444e9fcd6fd4d1fe6c04..2f3f688dc9f3b57b22ceba5d5032862193dfd2f7 100644
--- a/src/components/Modal/BatchDownloadModal.vue
+++ b/src/components/Modal/BatchDownloadModal.vue
@@ -37,6 +37,10 @@
:style="{ opacity: making && i + 1 > madeCount ? 0.5 : 1 }"
>
+
+
@@ -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: 2rem;
.avatar-box {
+ position: relative;
display: flex;
align-items: center;
justify-content: center;
+
+ .download-single {
+ position: absolute;
+ bottom: 1rem;
+ left: 50%;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 6.6rem;
+ height: 2.3rem;
+ margin-left: 1rem;
+ padding: 0 1rem;
+ color: var.$color-text;
+ font-weight: bold;
+ letter-spacing: 0.1rem;
+ background: var.$color-gray;
+ border-radius: 0.4rem;
+ border-radius: 0.6rem;
+ transform: translateX(-50%);
+ cursor: pointer;
+ opacity: 0;
+ transition: color 0.2s;
+ user-select: none;
+
+ &:hover {
+ color: lighten(var.$color-text, 10);
+ }
+ }
+
+ &:hover .download-single {
+ opacity: 1;
+ }
}
}
}
diff --git a/src/i18n/locales/en/index.ts b/src/i18n/locales/en/index.ts
index ef4cca27fb6765a5ba3309dc70f995596da3d5ad..ae40f5f6ca8cddea9231d688623d53e86a92094e 100644
--- a/src/i18n/locales/en/index.ts
+++ b/src/i18n/locales/en/index.ts
@@ -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',
diff --git a/src/i18n/locales/zh/index.ts b/src/i18n/locales/zh/index.ts
index ffa19c2156405aef19cd015f2da3aa9b87598389..6baa770dddee121afdcda85b3b397d46c06560f7 100644
--- a/src/i18n/locales/zh/index.ts
+++ b/src/i18n/locales/zh/index.ts
@@ -40,7 +40,7 @@ export default {
text: {
codeModalTitle: '配置代码',
downloadTip: '长按图片或右键点击下载至本地相册',
- downloadMultiple: '开始下载',
+ downloadMultiple: '下载全部',
downloadingMultiple: '正在下载',
downloadMultipleTip: '已为你自动生成头像',
regenerate: '换一批',