feat: 修复画布部分bug

src/component/Canvas/CanvasEditor/managers/ExportManager.js

@@ -1,5 +1,6 @@
 import { fabric } from "fabric-with-all";
 import { findObjectById } from "../utils/helper";
+import { createRasterizedImage } from "../utils/SelectionToImage";
 
 /**
  * 图片导出管理器
@@ -36,7 +37,6 @@ export class ExportManager {
     try {
       // 检查是否为红绿图模式
       const isRedGreenMode = this.layerManager?.isInRedGreenMode?.() || false;
-
       // 如果指定了具体图层ID，导出指定图层
       if (layerId) {
         return this._exportSpecificLayer(
@@ -220,7 +220,8 @@ export class ExportManager {
     return this._exportWithCanvasSize(
       objectsToExport,
       expPicType,
-      restoreOpacityInRedGreen
+      restoreOpacityInRedGreen,
+      this.canvas.clipPath
     );
   }
 
@@ -250,6 +251,14 @@ export class ExportManager {
       }
     }
 
+    if (layer.fabricObject) {
+      // 通过ID在画布中查找真实对象
+      const realObj = this._findRealObjectById(layer.fabricObject.id);
+      if (realObj && realObj.visible !== false) {
+        realObjects.push(realObj);
+      }
+    }
+
     // 递归收集子图层的对象
     if (layer.children && layer.children.length > 0) {
       for (const childLayer of layer.children) {
@@ -569,13 +578,30 @@ export class ExportManager {
   async _exportWithCanvasSize(
     objectsToExport,
     expPicType,
-    restoreOpacityInRedGreen
+    restoreOpacityInRedGreen,
+    maskObject
   ) {
     // 使用当前画布尺寸
-    const canvasWidth = this.canvas.width;
-    const canvasHeight = this.canvas.height;
+    // const canvasWidth =
+    //   this.canvasManager?.canvasWidth?.value || this.canvas.width;
+    // const canvasHeight =
+    //   this.canvasManager?.canvasHeight?.value || this.canvas.height;
 
-    console.log(`普通模式导出，画布尺寸: ${canvasWidth}x${canvasHeight}`);
+    // console.log(`普通模式导出，画布尺寸: ${canvasWidth}x${canvasHeight}`);
+
+    //  使用图层栅格化的方法导出图片
+    const dataURL = await createRasterizedImage({
+      canvas: this.canvas,
+      fabricObjects: objectsToExport,
+      format: expPicType, // 导出格式
+      isReturenDataURL: true, // 返回数据URL
+      maskObject: maskObject ?? null, // 使用裁剪对象
+      trimWhitespace: true, // 裁剪空白
+      trimPadding: 0, // 裁剪边距
+    });
+
+    console.log("导出图片数据URL:", dataURL);
+    return dataURL;
 
     // 创建与画布相同尺寸的临时画布
     const scaleFactor = 2; // 高清导出
@@ -593,7 +619,7 @@ export class ExportManager {
 
     tempFabricCanvas.enableRetinaScaling = true;
     tempFabricCanvas.imageSmoothingEnabled = true;
-    tempFabricCanvas.setZoom(scaleFactor);
+    tempFabricCanvas.setZoom(1);
 
     try {
       // 克隆并添加所有对象到临时画布