Upload dataSyncService.ts

frontend/src/services/dataSyncService.ts

@@ -392,6 +392,105 @@ class DataSyncService {
     }
   }
 
+  // Generate image and upload to backend for external link access
+  async generateAndUploadImage(slideIndex = 0, options: any = {}) {
+    const { format = 'jpeg', quality = 90, elementSelector = '.slide-viewport, .canvas-viewport, .viewport-wrapper' } = options;
+    
+    try {
+      const { useAuthStore, useSlidesStore } = await import('@/store')
+      const authStore = useAuthStore()
+      const slidesStore = useSlidesStore()
+
+      if (!authStore.isLoggedIn || !this.currentPPTId) {
+        throw new Error('User not logged in or no current PPT')
+      }
+
+      // Find target element for screenshot
+      let targetElement: HTMLElement | null = null
+      const selectors = elementSelector.split(',').map((s: string) => s.trim())
+      
+      for (const selector of selectors) {
+        targetElement = document.querySelector(selector) as HTMLElement
+        if (targetElement) {
+          console.log(`✅ Found screenshot target element: ${selector}`)
+          break
+        }
+      }
+
+      if (!targetElement) {
+        throw new Error(`Screenshot target element not found. Tried selectors: ${selectors.join(', ')}`)
+      }
+
+      // Dynamically load html2canvas
+      const html2canvas = await this.loadHtml2Canvas()
+      
+      console.log('🖼️ Starting to generate image for upload...', { format, quality })
+      
+      // Wait for fonts and images to load
+      await this.ensureResourcesReady()
+      
+      // Generate screenshot
+      const canvas = await html2canvas(targetElement, {
+        scale: 2, // High resolution
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: slidesStore.theme?.backgroundColor || '#ffffff',
+        logging: false,
+        onclone: function(clonedDoc) {
+          // Ensure correct fonts in cloned document
+          const clonedElements = clonedDoc.querySelectorAll('*')
+          clonedElements.forEach((el: any) => {
+            if (el.style) {
+              el.style.fontFamily = 'Microsoft YaHei, PingFang SC, Hiragino Sans GB, Source Han Sans SC, Noto Sans SC, WenQuanYi Micro Hei, SimHei, SimSun, Arial, Helvetica, sans-serif'
+            }
+          })
+        }
+      })
+
+      // Convert to specified format
+      const imageDataUrl = canvas.toDataURL(`image/${format}`, quality / 100)
+      
+      console.log('✅ Image generated, uploading to backend...')
+      
+      // Upload to backend
+      const baseUrl = window.location.origin
+      const uploadResponse = await fetch(`${baseUrl}/api/public/save-image/${authStore.currentUser!.id}/${this.currentPPTId}/${slideIndex}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          imageData: imageDataUrl,
+          format,
+          quality
+        })
+      })
+      
+      if (!uploadResponse.ok) {
+        throw new Error(`Upload failed: ${uploadResponse.status} ${uploadResponse.statusText}`)
+      }
+      
+      const uploadResult = await uploadResponse.json()
+      
+      console.log('✅ Image uploaded successfully, external URL:', uploadResult.imageUrl)
+      
+      return {
+        success: true,
+        imageUrl: uploadResult.imageUrl,
+        imageId: uploadResult.imageId,
+        expiresAt: uploadResult.expiresAt,
+        format,
+        quality,
+        width: canvas.width,
+        height: canvas.height
+      }
+      
+    } catch (error: any) {
+      console.error('❌ Failed to generate and upload image:', error)
+      throw error
+    }
+  }
+
   // Get PPT screenshot data (for frontend direct rendering)
   async getScreenshotData(slideIndex = 0) {
     const { useAuthStore } = await import('@/store')