diff --git a/index.html b/index.html index ff1dc87..148096a 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + diff --git a/public/share/male.png b/public/share/male.png deleted file mode 100644 index 4e9873d..0000000 Binary files a/public/share/male.png and /dev/null differ diff --git a/src/utils/share.ts b/src/utils/share.ts index ecdaf9a..c7b963b 100644 --- a/src/utils/share.ts +++ b/src/utils/share.ts @@ -120,7 +120,6 @@ export async function shareCurrentPage(title: string, description?: string): Pro * @param description 分享的描述(可选) */ export async function shareImage(imageUrl: string, title: string, description?: string): Promise { - console.log('1',imageUrl,'2',title) const currentUrl = window.location.href const text = description ? `${description}\n\n查看图片: ${imageUrl}` @@ -142,25 +141,29 @@ export async function shareImage(imageUrl: string, title: string, description?: */ export async function shareImageFile(imageFile: File, title?: string, text?: string): Promise { if (!isWebShareSupported()) { - // 如果不支持文件分享,可以尝试将文件转换为 URL 后分享 - const imageUrl = URL.createObjectURL(imageFile) - await shareImage(imageUrl, title || '分享图片', text) - URL.revokeObjectURL(imageUrl) - return + throw new Error('WEB_SHARE_UNSUPPORTED') + } + if (typeof navigator.canShare === 'function' && !navigator.canShare({ files: [imageFile] })) { + throw new Error('WEB_SHARE_FILE_UNSUPPORTED') } - try { - await shareWithWebAPI({ - title, - text, - files: [imageFile] - }) - } catch (error) { - // 如果分享失败,回退到 URL 方式 - const imageUrl = URL.createObjectURL(imageFile) - await shareImage(imageUrl, title || '分享图片', text) - URL.revokeObjectURL(imageUrl) - } + await shareWithWebAPI({ + title, + text, + files: [imageFile] + }) +} + +/** + * 将远程图片转换为 File 对象,便于提前缓存后再触发分享 + * @param imageUrl 图片链接 + * @param fileName 文件名(可选) + */ +export async function createImageFileFromUrl(imageUrl: string, fileName?: string): Promise { + const response = await fetch(imageUrl) + const blob = await response.blob() + const name = fileName || imageUrl.split('/').pop() || 'share-image.jpg' + return new File([blob], name, { type: blob.type || 'image/jpeg' }) } /** diff --git a/src/views/Workshop/creation/creation-list.vue b/src/views/Workshop/creation/creation-list.vue index fa9f67a..9512303 100644 --- a/src/views/Workshop/creation/creation-list.vue +++ b/src/views/Workshop/creation/creation-list.vue @@ -8,7 +8,7 @@ import { setTryOnEffectFavorite, cancelTryOnEffectFavorite } from '@/api/workshop' -import { shareImage } from '@/utils/share' +import { shareImageFile, createImageFileFromUrl, shareToWhatsApp } from '@/utils/share' import { useRouter } from 'vue-router' const router = useRouter() @@ -82,25 +82,54 @@ const onLoveItem = (v) => { }) } +const shareFileCache = new Map() +const preloadShareFile = (imageUrl: string) => { + if (shareFileCache.has(imageUrl)) return + createImageFileFromUrl(imageUrl) + .then((file) => { + shareFileCache.set(imageUrl, file) + }) + .catch((error) => { + console.error('预加载分享图片失败', error) + }) +} const isShare = ref(false) const handleOpenShare = () => { - isShare.value = !isShare.value - alert(`现在${isShare.value ? '可以' : '不可以'}分享`) + isShare.value = !isShare.value + if (isShare.value) { + list.forEach((item) => preloadShareFile(item.tryOnUrl)) + } + alert(`现在${isShare.value ? '可以' : '不可以'}分享`) } -const onDownloadItem = (v) => { - // console.log('1111111111111111', v) +const shareTryOnImage = async (imageUrl: string) => { + const cachedFile = shareFileCache.get(imageUrl) + if (!cachedFile) { + preloadShareFile(imageUrl) + alert('图片准备中,请稍后再试') + return + } + try { + await shareImageFile(cachedFile, 'Lane Crawford Creation') + } catch (error) { + console.error('分享图片失败', error) + const text = `Lane Crawford Creation\n\n查看图片: ${imageUrl}` + shareToWhatsApp(text) + } +} + +const onDownloadItem = async (v) => { if (isShare.value) { - shareImage(v.tryOnUrl,'Creation') - } else { - if (v.loading) return - v.loading = true - v.selected = false - DownloadImages([{ url: v.tryOnUrl }], null, null, () => { - v.loading = false - v.downloaded = true - }) + await shareTryOnImage(v.tryOnUrl) + return } + if (v.loading) return + v.loading = true + v.selected = false + DownloadImages([{ url: v.tryOnUrl }], null, null, () => { + v.loading = false + v.downloaded = true + }) } const onSelectItem = (v) => { if (selectCount.value >= maxSelectCount && !v.selected) return