feat(CanvasManager): enhance image layer management and event handling

src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js

@@ -1,4 +1,4 @@
-import { createRasterizedImage } from "../utils/SelectionToImage.js";
+import { createRasterizedImage } from "../utils/selectionToImage.js";
 import { CompositeCommand } from "./Command.js";
 import { CreateImageLayerCommand } from "./LayerCommands.js";
 import { ClearSelectionCommand } from "./SelectionCommands.js";
@@ -63,21 +63,27 @@ export class LassoCutoutCommand extends CompositeCommand {
       const selectionBounds = selectionObject.getBoundingRect(true, true);
 
       // 使用createRasterizedImage执行抠图操作
-      this.cutoutImageUrl = await this._performCutoutWithRasterized(
+      // this.cutoutImageUrl = await this._performCutoutWithRasterized(
+      //   sourceObjects,
+      //   selectionObject,
+      //   selectionBounds
+      // );
+      // if (!this.cutoutImageUrl) {
+      //   console.error("抠图失败");
+      //   return false;
+      // }
+
+      this.fabricImage = await this._performCutoutWithRasterized(
         sourceObjects,
         selectionObject,
         selectionBounds
       );
-      if (!this.cutoutImageUrl) {
-        console.error("抠图失败");
-        return false;
-      }
 
-      // 创建fabric图像对象，传递选区边界信息
-      this.fabricImage = await this._createFabricImage(
-        this.cutoutImageUrl,
-        selectionBounds
-      );
+      // // 创建fabric图像对象，传递选区边界信息
+      // this.fabricImage = await this._createFabricImage(
+      //   this.cutoutImageUrl,
+      //   selectionBounds
+      // );
       if (!this.fabricImage) {
         console.error("创建图像对象失败");
         return false;
@@ -224,7 +230,7 @@ export class LassoCutoutCommand extends CompositeCommand {
       console.log(`源对象数量: ${sourceObjects.length}`);
       console.log(`选区边界:`, selectionBounds);
 
-      // 确定缩放因子
+      // 确定缩放因子，确保高质量输出
       let scaleFactor = this.baseResolutionScale;
       if (this.highResolutionEnabled) {
         const devicePixelRatio = window.devicePixelRatio || 1;
@@ -235,26 +241,27 @@ export class LassoCutoutCommand extends CompositeCommand {
       const rasterizedDataURL = await createRasterizedImage({
         canvas: this.canvas,
         fabricObjects: sourceObjects,
-        clipPath: selectionObject, // 使用选区作为裁剪路径而不是遮罩
+        clipPath: selectionObject, // 使用选区作为裁剪路径
         trimWhitespace: true,
         trimPadding: 2,
         quality: 1.0,
         format: "png",
         scaleFactor: scaleFactor,
-        isReturenDataURL: true, // 返回DataURL
+        // isReturenDataURL: true, // 返回DataURL
+        preserveOriginalQuality: true, // 启用高质量模式
       });
 
       if (!rasterizedDataURL) {
         throw new Error("栅格化生成图像失败");
       }
 
-      console.log(`抠图完成，缩放因子: ${scaleFactor}x`);
+      console.log(`✅ 高质量抠图完成，缩放因子: ${scaleFactor}x`);
       return rasterizedDataURL;
     } catch (error) {
       console.error("使用createRasterizedImage执行抠图失败:", error);
 
       // 如果createRasterizedImage失败，回退到原始方法
-      console.log("回退到原始抠图方法...");
+      console.log("⚠️ 回退到原始抠图方法...");
       return await this._performCutout(
         { fabricObjects: sourceObjects },
         selectionObject

src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js

@@ -71,11 +71,7 @@ export class BatchInitializeRedGreenModeCommand extends Command {
         // 3. 保存原始状态
         this.originalBackgroundObject = backgroundLayer.fabricObject
           ? {
-              ...backgroundLayer.fabricObject.toObject([
-                "id",
-                "type",
-                "layerId",
-              ]),
+              ...backgroundLayer.fabricObject,
               ref: backgroundLayer.fabricObject,
             }
           : null;