优化图片和显示问题

frontend-electron/js/design2/ui.js

@@ -781,17 +781,22 @@ $('#down_obj').click(function () {
 $('#set_bg').click(function () {
     //设置为背景
     let obj = canvas.getActiveObject()
-    let idx = getIndex(canvas.getActiveObject())
+    if (!obj) return;
+    let idx = getIndex(obj)
+    if (idx <= 0) return;
     const scaleX = 1012 / obj.width
     const scaleY = 648 / obj.height
     // 使用缩放后的实际尺寸计算位置，确保与初始背景图片位置一致
+    // 修正：使用当前活动画布的容器宽度，背面应取 canvas2 的容器宽度
+    const containerW = canvas.width || 1012;
+    const containerH = canvas.height || 648;
     const scaledWidth = obj.width * scaleX;
     const scaledHeight = obj.height * scaleY;
     obj.set({
         scaleX: scaleX,
         scaleY: scaleY,
-        left: ($('#canvas1').width() - scaledWidth) / 2,
-        top: ($('#canvas1').height() - scaledHeight) / 2
+        left: (containerW - scaledWidth) / 2,
+        top: (containerH - scaledHeight) / 2
     })
     $('#text_w').val(1012)
     $('#text_h').val(648)
@@ -810,12 +815,31 @@ $('#set_bg').click(function () {
         evented: false
     });
     $("#lock_img").attr("src", soonAsset("lock20.png"))
-    canvas.sendToBack(canvas.getActiveObject())
-    canvas.bringForward(canvas.getActiveObject())
+
+    // 修正：先 remove 当前画布上的旧背景占位图（正面 background_image1 / 背面 background_image2），
+    // 否则 sendToBack 后用户图被压到最底层，仍会被占位图覆盖，肉眼看不到。
+    var oldBg = (canvas === canvas2) ? background_image2 : background_image1;
+    if (oldBg && oldBg !== obj) {
+        canvas.remove(oldBg);
+    }
+
+    canvas.sendToBack(obj);
+    canvas.bringForward(obj);
     canvas.renderAll()
     let objItem = objs.splice(idx - 1, 1)[0]
     objs.unshift(objItem)
 
+    // 同步 background_image 引用：背面时更新 background_image2，正面更新 background_image1
+    if (canvas === canvas2) {
+        background_image2 = obj;
+        window.background_image2 = obj;
+    } else {
+        background_image1 = obj;
+        window.background_image1 = obj;
+    }
+    background_image = obj;
+    window.background_image = obj;
+
     // 确保背景图（索引0）的锁定属性被正确设置
     setTimeout(() => {
         let bgObj = canvas.getObjects()[0];