From 8844b9b42a7d8460008308cc75597b1495875e31 Mon Sep 17 00:00:00 2001
From: LeoKu <czc12580520@gmail.com>
Date: Thu, 28 Jul 2022 13:21:17 +0800
Subject: [PATCH] Support single download

---
 README-EN.md                                |  2 +-
 README.md                                   |  2 +-
 src/components/Modal/BatchDownloadModal.vue | 59 +++++++++++++++++++++
 src/i18n/locales/en/index.ts                |  2 +-
 src/i18n/locales/zh/index.ts                |  2 +-
 5 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/README-EN.md b/README-EN.md
index 3ae5179..004f8fb 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 8b0408a..b9dbdde 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 68dae05..2f3f688 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 }"
               >
                 <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: 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 ef4cca2..ae40f5f 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 ffa19c2..6baa770 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: '换一批',
-- 
GitLab