Update frontend/src/services/dataSyncService.ts

frontend/src/services/dataSyncService.ts

@@ -1,5 +1,7 @@
 import api from '@/services'
 import { debounce } from 'lodash'
+// 添加前端截图支持
+import { toPng, toJpeg, toSvg } from 'html-to-image'
 
 class DataSyncService {
   private currentPPTId: string | null = null
@@ -251,6 +253,72 @@ class DataSyncService {
   async manualSave(): Promise<boolean> {
     return await this.savePPT(true)
   }
+
+  // 前端截图功能 - 作为后端截图的备用方案
+  async generateFrontendScreenshot(elementId = 'slideContainer', options = {}) {
+    try {
+      const element = document.getElementById(elementId)
+      if (!element) {
+        throw new Error(`Element with id '${elementId}' not found`)
+      }
+
+      const defaultOptions = {
+        quality: 0.95,
+        pixelRatio: 1,
+        backgroundColor: '#ffffff',
+        ...options
+      }
+
+      console.log('🖼️ 开始前端截图生成...')
+      
+      // 使用html-to-image生成截图
+      const imageDataUrl = await toJpeg(element, defaultOptions)
+      
+      console.log('✅ 前端截图生成成功')
+      return imageDataUrl
+    } catch (error) {
+      console.error('❌ 前端截图生成失败:', error)
+      throw error
+    }
+  }
+
+  // 生成PPT截图链接（优先使用后端，失败时尝试前端）
+  async generateScreenshotUrl(slideIndex = 0, useFrontend = false) {
+    const { useAuthStore } = await import('@/store')
+    const authStore = useAuthStore()
+
+    if (!authStore.isLoggedIn || !this.currentPPTId) {
+      throw new Error('用户未登录或没有当前PPT')
+    }
+
+    const baseUrl = window.location.origin
+    const backendScreenshotUrl = `${baseUrl}/api/public/screenshot/${authStore.currentUser!.id}/${this.currentPPTId}/${slideIndex}`
+
+    if (useFrontend) {
+      try {
+        // 尝试前端截图
+        const frontendScreenshot = await this.generateFrontendScreenshot()
+        return {
+          type: 'frontend',
+          url: frontendScreenshot,
+          isDataUrl: true
+        }
+      } catch (frontendError) {
+        console.warn('前端截图失败，回退到后端URL:', frontendError.message)
+        return {
+          type: 'backend',
+          url: backendScreenshotUrl,
+          isDataUrl: false
+        }
+      }
+    }
+
+    return {
+      type: 'backend',
+      url: backendScreenshotUrl,
+      isDataUrl: false
+    }
+  }
 }
 
 // 创建单例实例