From 8d67c28f619c3b17df2815ce25c0aaa10206e4ff Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Thu, 22 Jan 2026 13:28:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B7=BB=E5=8A=A0=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E9=A1=B5=E9=9D=A2=E5=88=87=E6=8D=A2=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E5=9B=BE=E7=9A=84=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=8A=96=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tools/add_background/add_background.vue   | 62 ++++++-------------
 1 file changed, 20 insertions(+), 42 deletions(-)

diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue
index 0bce21d..594afbe 100644
--- a/src/views/tools/add_background/add_background.vue
+++ b/src/views/tools/add_background/add_background.vue
@@ -829,19 +829,14 @@ const applyBackgroundImage = async (imageUrl: string) => {
   if (!fabricCanvas || !uploadedImage.value || !uploadedImageUrl.value) return
   
   try {
-    processing.value = true
+    // Don't set processing.value = true to avoid overlay flicker
     
-    // Save the original foreground image reference before clearing
-    const currentObjects = fabricCanvas.getObjects()
-    const foregroundImg = currentObjects.length > 0 ? currentObjects[0] : null
-    
-    // Load background image
+    // Load background image first (canvas not changed yet, user sees nothing)
     const bgImg = await FabricImage.fromURL(imageUrl, {
       crossOrigin: 'anonymous'
     })
     
     if (!bgImg || !fabricCanvas) {
-      processing.value = false
       return
     }
     
@@ -866,42 +861,28 @@ const applyBackgroundImage = async (imageUrl: string) => {
       evented: false
     })
     
-    // Clear canvas
-    fabricCanvas.clear()
+    // Get current objects
+    const currentObjects = fabricCanvas.getObjects()
     
-    // Add background image first (at the bottom)
+    // Disable auto-rendering to prevent flicker
+    fabricCanvas.renderOnAddRemove = false
+    
+    // Remove old background images (keep only the last object - foreground)
+    // This keeps the foreground visible at all times
+    if (currentObjects.length > 1) {
+      const objectsToRemove = currentObjects.slice(0, -1)
+      objectsToRemove.forEach(obj => fabricCanvas.remove(obj))
+    }
+    
+    // Add new background image at the bottom
     fabricCanvas.add(bgImg)
+    fabricCanvas.sendObjectToBack(bgImg)
     
-    // Re-load and add the foreground image (original uploaded image)
-    if (foregroundImg) {
-      // Clone the foreground image to avoid issues
-      const newForegroundImg = await FabricImage.fromURL(uploadedImageUrl.value, {
-        crossOrigin: 'anonymous'
-      })
-      
-      if (newForegroundImg) {
-        newForegroundImg.set({
-          left: canvasWidth / 2,
-          top: canvasHeight / 2,
-          originX: 'center',
-          originY: 'center',
-          selectable: false,
-          evented: false
-        })
-        
-        fabricCanvas.add(newForegroundImg)
-      }
-    }
-    
-    // Ensure correct layer order: background at bottom, foreground on top
-    const allObjects = fabricCanvas.getObjects()
-    if (allObjects.length === 2) {
-      // Move background (first object) to back
-      fabricCanvas.sendObjectToBack(allObjects[0])
-      // Move foreground (second object) to front
-      fabricCanvas.bringObjectToFront(allObjects[1])
-    }
+    // Clear background color since we're using background image
+    fabricCanvas.backgroundColor = null
     
+    // Re-enable auto-rendering and render once
+    fabricCanvas.renderOnAddRemove = true
     fabricCanvas.renderAll()
     
     // Export result
@@ -930,8 +911,6 @@ const applyBackgroundImage = async (imageUrl: string) => {
       historyList.value[currentHistoryIndex.value].resultImage = dataUrl
     }
     
-    processing.value = false
-    
     // Auto-close mobile color picker on mobile
     if (window.innerWidth <= 768) {
       closeMobileColorPicker()
@@ -939,7 +918,6 @@ const applyBackgroundImage = async (imageUrl: string) => {
   } catch (error: any) {
     console.error('Apply background image error:', error)
     message.error(t('Failed to apply background image'))
-    processing.value = false
   }
 }