优化图片和显示问题

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,
+        left: (containerW - scaledWidth) / 2,
-        top: ($('#canvas1').height() - scaledHeight) / 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];

frontend-web/config/version.js

@@ -1,4 +1,4 @@
 (function () {
   'use strict';
-  window.SOON_APP_VERSION = 'ce76bb8';
+  window.SOON_APP_VERSION = '0f26163';
 })();

frontend-web/js/design2/core.js

@@ -742,18 +742,18 @@ function soonDesign2LockBgObject(bgObj) {
     });
 }
 
-/** 打开旧文件：去掉残留模板层，用户背景独占 canvas[0] 并贴齐卡框 */
+/** 打开旧文件：把 canvas[0] 的用户背景图贴齐卡框并锁定。
+ *  设计前提：保存 .soon 时 canvas[0] == 用户背景图（set_bg 已把它放到 0 位）。
+ *  之前的实现会 fabricCanvas.remove(all[0]) 并把 all[1]（前景）当成新 userBg，导致重打开后
+ *  用户背景图丢失、前景元素被错误地缩放并锁定到卡框大小。本版本不再删除 all[0]，
+ *  改为直接把已有的 all[0] 当成用户背景图处理。 */
 function soonDesign2NormalizeUserBg(fabricCanvas, metaList) {
     if (!soonDesign2IsUserBgMeta(metaList) || !fabricCanvas) return null;
     var all = fabricCanvas.getObjects().filter(function (o) { return !o.isGuideLine; });
     if (!all.length) return null;
-    var frame = soonDesign2FrameOrigin(fabricCanvas);
     var userBg = all[0];
-    if (all.length > 1) {
-        fabricCanvas.remove(all[0]);
-        userBg = fabricCanvas.getObjects().filter(function (o) { return !o.isGuideLine; })[0];
-    }
     if (!userBg) return null;
+    var frame = soonDesign2FrameOrigin(fabricCanvas);
     soonDesign2SnapImageToCardFrame(userBg, fabricCanvas, frame);
     soonDesign2ApplyUserBgAsCanvas0(userBg, fabricCanvas, null);
     soonDesign2LockBgObject(userBg);

frontend-web/js/design2/output.js

@@ -1442,6 +1442,13 @@ window.openFile = function open(file, jAlready) {
             if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
             return;
         }
+        // 防御性：j.b 缺失时给一个空画布占位（避免 canvas2.loadFromJSON 报 undefined）
+        if (!j.b || typeof j.b !== 'object' || !Array.isArray(j.b.objects)) {
+            if (typeof console !== 'undefined' && console.warn) {
+                console.warn('[design2.openFile] j.b 缺失，自动以空背面回退。文件:', file);
+            }
+            j.b = { version: '4.6.0', objects: [], hoverCursor: 'move' };
+        }
         function runOpen() {
         if (!background_image) {
             if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');

frontend-web/js/design2/ui.js

@@ -789,7 +789,10 @@ $('#down_obj').click(function () {
 $('#set_bg').click(function () {
     let obj = canvas.getActiveObject()
     let idx = getIndex(obj)
-    var oldBg = background_image1 || background_image
+    // 旧背景：取当前画布对应的占位背景图（正面->background_image1，背面->background_image2），
+    // 背面场景下 background_image 已被 #back_side 切换为 background_image2。
+    var oldBg = (canvas === canvas2) ? background_image2 : background_image1
+    if (!oldBg) oldBg = background_image
     var frame = typeof window.soonDesign2FrameOrigin === 'function'
         ? window.soonDesign2FrameOrigin(canvas)
         : { left: oldBg.left, top: oldBg.top }

frontend-web/js/platform/web.js

@@ -423,6 +423,13 @@
             typeof window.soonBindFileMeta === 'function') {
           window.soonBindFileMeta(cacheKey, { name: hit.meta.name });
         }
+        // 兜底：design2（背面文件）若缓存里 j.b 缺失，主动补一个空背面结构，
+        // 避免 design2.canvas2.loadFromJSON(undefined) 抛错或吃掉整段加载。
+        if ((hit.json.soonType === 2 || hit.json.backBlackPic || (hit.json.bo && hit.json.bo.length) || (hit.json.f && hit.json.b === undefined && typeof hit.json.b === 'undefined'))) {
+          if (!hit.json.b || typeof hit.json.b !== 'object' || !Array.isArray(hit.json.b.objects)) {
+            hit.json.b = { version: '4.6.0', objects: [], hoverCursor: 'move' };
+          }
+        }
         return Promise.resolve(hit.json);
       }