Support single download

This commit is contained in:
LeoKu 2022-07-28 13:21:17 +08:00
parent 7a9fd61035
commit 8844b9b42a
5 changed files with 63 additions and 4 deletions

View File

@ -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

View File

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

View File

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

View File

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

View File

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