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