feat: 测试图片分享

index.html

@@ -11,7 +11,7 @@
     <!-- Open Graph / WhatsApp share metadata -->
     <meta property="og:title" content="Lane Crawford" />
     <meta property="og:description" content="create and share looks from the Lane Crawford creation gallery." />
-    <meta property="og:image" content="https://www.lc.aida.com.hk/share/male.png" />
+    <meta property="og:image" content="" />
     <meta property="og:url" content="https://www.lc.aida.com.hk" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="Lane Crawford" />

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<void> {
-  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<void> {
 	if (!isWebShareSupported()) {
-		// 如果不支持文件分享，可以尝试将文件转换为 URL 后分享
+		throw new Error('WEB_SHARE_UNSUPPORTED')
-		const imageUrl = URL.createObjectURL(imageFile)
+	}
-		await shareImage(imageUrl, title || '分享图片', text)
+	if (typeof navigator.canShare === 'function' && !navigator.canShare({ files: [imageFile] })) {
-		URL.revokeObjectURL(imageUrl)
+		throw new Error('WEB_SHARE_FILE_UNSUPPORTED')
-		return
 	}
 
-	try {
+	await shareWithWebAPI({
-		await shareWithWebAPI({
+		title,
-			title,
+		text,
-			text,
+		files: [imageFile]
-			files: [imageFile]
+	})
-		})
+}
-	} catch (error) {
+
-		// 如果分享失败，回退到 URL 方式
+/**
-		const imageUrl = URL.createObjectURL(imageFile)
+ * 将远程图片转换为 File 对象，便于提前缓存后再触发分享
-		await shareImage(imageUrl, title || '分享图片', text)
+ * @param imageUrl 图片链接
-		URL.revokeObjectURL(imageUrl)
+ * @param fileName 文件名（可选）
-	}
+ */
+export async function createImageFileFromUrl(imageUrl: string, fileName?: string): Promise<File> {
+	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' })
 }
 
 /**

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<string, File>()
+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
+	isShare.value = !isShare.value
-  alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
+	if (isShare.value) {
+		list.forEach((item) => preloadShareFile(item.tryOnUrl))
+	}
+	alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
 }
 
-const onDownloadItem = (v) => {
+const shareTryOnImage = async (imageUrl: string) => {
-  // console.log('1111111111111111', v)
+	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')
+		await shareTryOnImage(v.tryOnUrl)
-  } else {
+		return
-    if (v.loading) return
-    v.loading = true
-    v.selected = false
-    DownloadImages([{ url: v.tryOnUrl }], null, null, () => {
-      v.loading = false
-      v.downloaded = true
-    })
   }
+  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