Support single download

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
 

README.md

@@ -25,7 +25,7 @@
 - 随机生成头像，有一定概率触发彩蛋
 - 撤销/还原*更改*
 - 国际化多语言
-- 批量下载多个头像
+- 批量生成多个头像
 
 ## 设计资源
 

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;
+      }
     }
   }
 }

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',

src/i18n/locales/zh/index.ts

@@ -40,7 +40,7 @@ export default {
   text: {
     codeModalTitle: '配置代码',
     downloadTip: '长按图片或右键点击下载至本地相册',
-    downloadMultiple: '开始下载',
+    downloadMultiple: '下载全部',
     downloadingMultiple: '正在下载',
     downloadMultipleTip: '已为你自动生成头像',
     regenerate: '换一批',