优化添加背景页面清除背景功能

src/views/tools/add_background/add_background.vue

@@ -1997,56 +1997,32 @@ const clearBackground = async () => {
   if (!fabricCanvas || !uploadedImage.value || !uploadedImageUrl.value) return
   
   try {
-    processing.value = true
+    // Don't show processing overlay to avoid flicker
+    // processing.value = true
     
-    // Clean up old canvas
+    // Get current objects
-    if (fabricCanvas) {
+    const currentObjects = fabricCanvas.getObjects()
-      fabricCanvas.dispose()
+    
-      fabricCanvas = null
+    // If there are multiple objects (background image exists), keep only the last one (foreground)
+    // Layer order: background images are at the bottom, foreground image is on top (last)
+    if (currentObjects.length > 1) {
+      // Disable auto-rendering to prevent multiple redraws
+      fabricCanvas.renderOnAddRemove = false
+      
+      // Remove all objects except the last one (foreground image)
+      const objectsToRemove = currentObjects.slice(0, -1)
+      objectsToRemove.forEach(obj => fabricCanvas.remove(obj))
+      
+      // Re-enable auto-rendering
+      fabricCanvas.renderOnAddRemove = true
     }
     
-    // Create new fabric canvas WITHOUT background
+    // Clear background color to transparent
-    fabricCanvas = new Canvas(canvasRef.value, {
-      selection: false,
-      backgroundColor: null
-    })
-    
-    // Load the original uploaded image (already has transparency)
-    const img = await FabricImage.fromURL(uploadedImageUrl.value, {
-      crossOrigin: 'anonymous'
-    })
-    
-    if (!img || !fabricCanvas) {
-      processing.value = false
-      return
-    }
-    
-    // Get image natural dimensions
-    const imgWidth = img.width || 1
-    const imgHeight = img.height || 1
-    
-    // Set canvas to actual image dimensions
-    fabricCanvas.setDimensions({ width: imgWidth, height: imgHeight })
-    
-    img.set({
-      left: 0,
-      top: 0,
-      selectable: false,
-      evented: false,
-      scaleX: 1,
-      scaleY: 1
-    })
-    
-    // Ensure no background color (null for transparent)
     fabricCanvas.backgroundColor = null
     
-    fabricCanvas.add(img)
+    // Single render call for all changes
-    fabricCanvas.centerObject(img)
     fabricCanvas.renderAll()
     
-    // Adjust visual display size to fit container
-    adjustCanvasSize()
-    
     // Export result with transparent background
     const dataUrl = fabricCanvas.toDataURL({
       format: 'png',
@@ -2077,11 +2053,11 @@ const clearBackground = async () => {
       historyList.value[currentHistoryIndex.value].backgroundColor = ''
     }
     
-    processing.value = false
+    // processing.value = false
   } catch (error: any) {
     console.error('Clear background error:', error)
     message.error(t('Failed to clear background'))
-    processing.value = false
+    // processing.value = false
   }
 }