zouma-short/src/components/PosterPage.vue

<template>
    <ion-modal :is-open="show" ref="modalRef" class="open-modal" @didDismiss="dismiss">
        <div class="modal-box">
            <img :src="posterUrl" alt="" />

            <div class="btns">
                <van-button
                    class="copy"
                    @click="copyText(shareUrl)"
                    round
                    color="linear-gradient(180deg, #FFD1D8 , #FFEAD0 )"
                    >複製連結</van-button
                >
                <van-button class="save" @click="save" round color="linear-gradient(180deg, #FF7340 , #FF3E3E )"
                    >保存圖片</van-button
                >
            </div>
        </div>
    </ion-modal>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import VueQrcode from '@chenfengyuan/vue-qrcode'
import qrcode from 'qrcode'
import { Capacitor } from '@capacitor/core'
import { useUserStore } from '../stores/user'
import shareImg from '@/assets/png-yaoqinghaoyou-tanchuang.png'
import { Clipboard as NativeClipboard } from '@capacitor/clipboard'
import { useClipboard } from '@vueuse/core'
import toast from '@/utils/toast'
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'
import { Media } from '@capacitor-community/media'

const show = ref(false)

function dismiss() {
    show.value = false
}

const { user } = useUserStore()
async function getInviteUrl() {}

const shareUrl = ref('')
const posterUrl = ref('')
async function onOpenInviteModal() {
    let qrImg = new Image()
    let bgImg = new Image()
    const url = await getInviteUrl()
    shareUrl.value = url
    function loadQR() {
        return new Promise((resolve, reject) => {
            qrcode.toDataURL(url, { width: 335, height: 335, margin: 0 }, function (err, url) {
                if (err) {
                    reject(err)
                }
                qrImg.onload = () => {
                    resolve()
                }
                qrImg.src = url
            })
        })
    }
    function loadBg() {
        return new Promise((resolve, reject) => {
            bgImg.onload = () => {
                resolve()
            }
            bgImg.src = shareImg
        })
    }
    await Promise.all([loadQR(), loadBg()])
    let canvas = document.createElement('canvas')
    canvas.width = 900
    canvas.height = 1200
    let ctx = canvas.getContext('2d')
    ctx.drawImage(bgImg, 0, 0)
    ctx.drawImage(qrImg, 230, 420, 450, 450)
    let dataUrl = canvas.toDataURL('image/png')
    posterUrl.value = dataUrl
    show.value = true
}
defineExpose({ onOpenInviteModal })

const { copy } = useClipboard({ legacy: true })
async function copyText(text) {
    if (Capacitor.isNativePlatform()) {
        await NativeClipboard.write({
            string: text
        })
    } else {
        copy(text)
    }
    toast.success('复制成功')
}

async function save() {
    if (Capacitor.isNativePlatform()) {
        //
        try {
            const savedFile = await Filesystem.writeFile({
                path: 'share.png',
                data: posterUrl.value,
                directory: Directory.Data
            })
            await Media.savePhoto({
                path: savedFile.uri,
                album: 'FirstCash'
            })
            toast.success('保存成功')
        } catch (e) {
            console.log(e)
        }
    } else {
        var link = document.createElement('a')
        link.setAttribute('download', 'Share.png')
        link.setAttribute('href', posterUrl.value.replace('image/png', 'image/octet-stream'))
        link.click()
    }
}
</script>

<style lang="less" scoped>
.open-modal {
    --height: fit-content;
    --border-radius: 8px;
    --width: 300px;
    --background: transparent;
}

.modal-box {
    position: relative;
    .btns {
        display: flex;
        justify-content: space-between;
        padding: 40px 0;
        .copy {
            width: 100px;
            color: #ff4034 !important;
            font-family: AlimamaShuHeiTi;
            text-shadow: 0px 2px 1px #ffffff;
        }

        .save {
            width: 184px;
            font-family: AlimamaShuHeiTi;
            text-shadow: 0px 2px 1px #e71d0c;
        }
    }
}
</style>