Upload useExport.ts

frontend/src/hooks/useExport.ts

@@ -13,6 +13,7 @@ import { type SvgPoints, toPoints } from '@/utils/svgPathParser'
 import { encrypt } from '@/utils/crypto'
 import { svg2Base64 } from '@/utils/svg2Base64'
 import { renderElementToBase64, isCanvasRenderSupported, getElementDimensions } from '@/utils/canvasRenderer'
+import { renderWithHuggingfaceFix, isHuggingfaceEnvironment } from '@/utils/huggingfaceRenderer'
 import message from '@/utils/message'
 
 interface ExportImageConfig {
@@ -39,26 +40,69 @@ export default () => {
   // 导出图片
   const exportImage = (domRef: HTMLElement, format: string, quality: number, ignoreWebfont = true) => {
     exporting.value = true
-    const toImage = format === 'png' ? toPng : toJpeg
-
+    
+    // 检查是否在Huggingface环境
+    const isHF = isHuggingfaceEnvironment()
+    console.log('exportImage: Environment check:', { isHuggingface: isHF, format })
+    
     const foreignObjectSpans = domRef.querySelectorAll('foreignObject [xmlns]')
     foreignObjectSpans.forEach(spanRef => spanRef.removeAttribute('xmlns'))
 
-    setTimeout(() => {
-      const config: ExportImageConfig = {
-        quality,
-        width: 1600,
-      }
-
-      if (ignoreWebfont) config.fontEmbedCSS = ''
-
-      toImage(domRef, config).then(dataUrl => {
+    setTimeout(async () => {
+      try {
+        let dataUrl: string
+        
+        if (isHF) {
+          // Huggingface环境使用专用渲染器
+          console.log('exportImage: Using Huggingface renderer')
+          dataUrl = await renderWithHuggingfaceFix(domRef)
+          
+          // 如果需要JPEG格式，转换PNG到JPEG
+          if (format === 'jpeg' && dataUrl.startsWith('data:image/png')) {
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
+            const img = new Image()
+            
+            await new Promise((resolve, reject) => {
+              img.onload = () => {
+                canvas.width = img.width
+                canvas.height = img.height
+                ctx?.drawImage(img, 0, 0)
+                dataUrl = canvas.toDataURL('image/jpeg', quality)
+                resolve(dataUrl)
+              }
+              img.onerror = reject
+              img.src = dataUrl
+            })
+          }
+        } else {
+          // 非Huggingface环境使用原有方法
+          const toImage = format === 'png' ? toPng : toJpeg
+          const config: ExportImageConfig = {
+            quality,
+            width: 1600,
+          }
+          
+          if (ignoreWebfont) config.fontEmbedCSS = ''
+          dataUrl = await toImage(domRef, config)
+        }
+        
         exporting.value = false
         saveAs(dataUrl, `${title.value}.${format}`)
-      }).catch(() => {
+        
+        if (isHF) {
+          message.success('图片导出成功（Huggingface优化版本）')
+        }
+      } catch (error) {
+        console.error('exportImage failed:', error)
         exporting.value = false
-        message.error('导出图片失败')
-      })
+        
+        if (isHF) {
+          message.error('图片导出失败，Huggingface环境可能存在兼容性问题')
+        } else {
+          message.error('导出图片失败')
+        }
+      }
     }, 200)
   }