aida_front/src/component/Canvas/CanvasEditor/utils/selectionToImage.js

// 栅格化帮助
import { fabric } from "fabric-with-all";
import { SpecialLayerId } from "./layerHelper";
/**
 * 创建栅格化图像 - 重构版本
 * 采用复制原对象+裁剪路径的方式，保持原始质量和准确位置
 * @returns {Promise<fabric.Image|fabric.Group|string>} 栅格化后的图像对象或DataURL
 * @private
 */
export const createRasterizedImage = async ({
  canvas, // 画布对象   必填
  fabricObjects = [], // 要栅格化的对象列表  -  按顺序  必填
  maskObject = null, // 用于裁剪的对象  -  可选
  clipPath = null, // 裁剪路径对象 - 可选，优先级高于maskObject
  trimWhitespace = true, // 是否裁剪空白区域
  trimPadding = 0, // 裁剪边距
  quality = 1.0, // 图像质量
  format = "png", // 图像格式
  scaleFactor = 1, //  高清倍数  - 默认是画布的高清倍数
  isReturenDataURL = false, // 是否返回DataURL而不是fabric.Image对象
  preserveOriginalQuality = true, // 是否保持原始质量（新增）
  selectionManager = null, // 选区管理器，用于获取羽化值等设置
  restoreOpacityInRedGreen, // 是否在红绿图模式下恢复透明度
	isEnhanceImg, // 是否是增强图片
} = {}) => {
  try {
    // console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);

    // 确保有对象需要栅格化
    if (fabricObjects.length === 0) {
      console.warn("⚠️ 没有对象需要栅格化，返回空图像");
      return null;
    }

    // 处理裁剪对象，优先使用clipPath
    const clippingObject = clipPath || maskObject;
    // 如果保持原始质量且有裁剪对象，使用新的裁剪方法
    if (preserveOriginalQuality && clippingObject) {
      return await createClippedObjects({
        canvas,
        fabricObjects,
        clippingObject,
        isReturenDataURL,
        selectionManager, // 传递选区管理器
				isEnhanceImg, // 是否是增强图片
      });
    }

    // 如果只是简单复制而不需要裁剪，直接克隆对象
    if (!clippingObject) {
      return await createSimpleClone({
        canvas,
        fabricObjects,
        isReturenDataURL,
        quality,
        format,
      });
    }

    // 兼容原有的离屏渲染方法（作为备选方案）
    return await createLegacyRasterization({
      canvas,
      fabricObjects,
      clippingObject,
      scaleFactor,
      quality,
      format,
      isReturenDataURL,
    });
  } catch (error) {
    console.warn("创建栅格化图像失败:", error);
    throw new Error(`栅格化失败: ${error.message}`);
  }
};

/**
 * 创建带裁剪的对象 - 新方法
 * 直接复制原对象并应用裁剪路径，保持原始质量
 */
const createClippedObjects = async ({
  canvas,
  fabricObjects,
  clippingObject,
  isReturenDataURL,
  selectionManager = null, // 新增选区管理器参数
	isEnhanceImg, // 是否是增强图片
}) => {
  try {
    // console.log("🎯 使用新的图像遮罩裁剪方法创建对象");

    // 使用优化后的边界计算，确保包含描边区域
    const optimizedBounds = calculateOptimizedBounds(
      clippingObject,
      fabricObjects
    );
    // console.log("📐 优化后的选区边界框:", optimizedBounds);

    // 获取羽化值
    let featherAmount = 0;
    if (
      selectionManager &&
      typeof selectionManager.getFeatherAmount === "function"
    ) {
      featherAmount = selectionManager.getFeatherAmount();
    //   console.log(`🌟 应用羽化效果: ${featherAmount}px`);
    }

    // 方法1：如果只需要返回DataURL，使用画布裁剪方法
    if (isReturenDataURL) {
      return await createClippedDataURLByCanvas({
        canvas,
        fabricObjects,
        clippingObject,
        selectionBounds: optimizedBounds, // 使用优化后的边界框
        featherAmount,
				isEnhanceImg, // 是否是增强图片
      });
    }

    // 方法2：如果需要返回fabric对象，先生成DataURL再转换为fabric对象
    const clippedDataURL = await createClippedDataURLByCanvas({
      canvas,
      fabricObjects,
      clippingObject,
      selectionBounds: optimizedBounds, // 使用优化后的边界框
      featherAmount,
			isEnhanceImg, // 是否是增强图片
    });

    // 将DataURL转换为fabric.Image对象
    const fabricImage = await createFabricImageFromDataURL(clippedDataURL);

    // 使用fabric原生方法恢复到选区的原始大小和位置
    fabricImage.scaleToWidth(optimizedBounds.width);
    fabricImage.scaleToHeight(optimizedBounds.height);

    // 设置到选区的原始位置（中心点）
    fabricImage.set({
      left: optimizedBounds.left + optimizedBounds.width / 2,
      top: optimizedBounds.top + optimizedBounds.height / 2,
      originX: "center",
      originY: "center",
      selectable: true,
      evented: true,
      // hasControls: true,
      // hasBorders: true,
      custom: {
        type: "clipped",
        clippedAt: new Date().toISOString(),
        hasClipping: true,
        preservedQuality: true,
        originalBounds: optimizedBounds, // 保存优化后的边界框
        restoredToOriginalSize: true,
        usedImageMask: true, // 标记使用了图像遮罩
        featherAmount: featherAmount,
        boundaryOptimized: true, // 标记使用了边界优化
      },
    });

    // 更新坐标
    fabricImage.setCoords();

    // console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置");
    return fabricImage;
  } catch (error) {
    console.warn("创建裁剪对象失败:", error);
    throw error;
  }
};

/**
 * 通过画布裁剪生成DataURL
 * 裁剪掉选区以外的内容，保持和选区大小一致
 */
const createClippedDataURLByCanvas = async ({
  canvas,
  fabricObjects,
  clippingObject,
  selectionBounds,
  featherAmount = 0,
  isEnhanceImg = false, // 是否是增强图片
}) => {
  try {
    // console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");

    // 使用优化后的边界计算，确保包含描边区域
    // const optimizedBounds = calculateOptimizedBounds(
    //   clippingObject,
    //   fabricObjects
    // );
	const optimizedBounds = {
		left: clippingObject.left - clippingObject.width / 2,
		top: clippingObject.top - clippingObject.height / 2,
		width: clippingObject.width,
		height: clippingObject.height,
	}

    // 使用高分辨率以保证质量
    const pixelRatio = window.devicePixelRatio || 1;
		const qualityMultiplier = !!isEnhanceImg ? Math.max(2, pixelRatio) : 1;
		
		// console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds);

    const canvasWidth = Math.ceil(optimizedBounds.width * qualityMultiplier);
    const canvasHeight = Math.ceil(optimizedBounds.height * qualityMultiplier);

    // console.log(
    //   `📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})`
    // );
    // console.log("🎯 边界框对比:", {
    //   original: selectionBounds,
    //   optimized: optimizedBounds,
    // });

    // 步骤1: 先将路径转换为遮罩图像（支持羽化）
    const maskImageDataURL =
      featherAmount > 0
        ? await createAdvancedMaskImage({
            clippingObject,
            selectionBounds: optimizedBounds, // 使用优化后的边界框
            qualityMultiplier,
            featherAmount,
          })
        : await createMaskImageFromPath({
            clippingObject,
            selectionBounds: optimizedBounds, // 使用优化后的边界框
            qualityMultiplier,
          });

    // 步骤2: 渲染原始内容
    const contentImageDataURL = await renderContentToImage({
      fabricObjects,
      selectionBounds: optimizedBounds, // 使用优化后的边界框
      qualityMultiplier,
    });

    // 步骤3: 使用遮罩合成最终结果
    const clippedDataURL = await applyImageMask({
      contentImageDataURL,
      maskImageDataURL,
      canvasWidth,
      canvasHeight,
    });

    // console.log("✅ 图像遮罩裁剪完成，生成DataURL");
    return clippedDataURL;
  } catch (error) {
    console.error("图像遮罩裁剪失败:", error);
    throw error;
  }
};

/**
 * 创建简单克隆对象
 * 当不需要裁剪时，直接克隆原对象
 */
const createSimpleClone = async ({
  canvas,
  fabricObjects,
  isReturenDataURL,
  quality,
  format,
}) => {
  try {
    // console.log("📋 创建简单克隆对象");

    const clonedObjects = [];

    // 克隆所有对象
    for (const obj of fabricObjects) {
      const clonedObj = await cloneObjectAsync(obj);

      clonedObj.set({
        selectable: true,
        evented: true,
        hasControls: true,
        hasBorders: true,
        custom: {
          ...clonedObj.custom,
          type: "cloned",
          clonedAt: new Date().toISOString(),
          preservedQuality: true,
        },
      });

      clonedObjects.push(clonedObj);
    }

    // 如果需要返回DataURL，需要渲染
    if (isReturenDataURL) {
      return await renderObjectsToDataURL(clonedObjects, quality, format);
    }

    // 如果只有一个对象，直接返回
    if (clonedObjects.length === 1) {
      return clonedObjects[0];
    }

    // 创建组合
    const group = new fabric.Group(clonedObjects, {
      selectable: true,
      evented: true,
      hasControls: true,
      hasBorders: true,
      custom: {
        type: "clonedGroup",
        clonedAt: new Date().toISOString(),
        objectCount: clonedObjects.length,
        preservedQuality: true,
      },
    });

    return group;
  } catch (error) {
    console.error("创建简单克隆失败:", error);
    throw error;
  }
};

/**
 * 将对象渲染为DataURL
 */
const renderObjectsToDataURL = async (objects, quality, format) => {
  try {
    // 计算对象边界框
    const bounds = calculateBounds(objects);
    if (!bounds.absoluteBounds) {
      throw new Error("无法计算对象边界框");
    }

    // 创建临时画布用于渲染
    const tempCanvas = new fabric.StaticCanvas();
    const { absoluteBounds } = bounds;

    tempCanvas.setDimensions({
      width: Math.ceil(absoluteBounds.width),
      height: Math.ceil(absoluteBounds.height),
    });

    // 调整对象位置并添加到临时画布
    for (const obj of objects) {
      const tempObj = await cloneObjectAsync(obj);
      tempObj.set({
        left: tempObj.left - absoluteBounds.left,
        top: tempObj.top - absoluteBounds.top,
      });
      tempCanvas.add(tempObj);
    }

    // 渲染并获取DataURL
    tempCanvas.renderAll();
    const dataURL = tempCanvas.toDataURL({
      format,
      quality,
    });

    // 清理临时画布
    tempCanvas.dispose();

    return dataURL;
  } catch (error) {
    console.error("渲染对象为DataURL失败:", error);
    throw error;
  }
};

/**
 * 渲染裁剪后的对象为DataURL
 * 专门处理带有裁剪路径的对象渲染（备用方法）
 */
const renderClippedObjectsToDataURL = async (clippedObjects) => {
  try {
    // console.log("🖼️ 渲染裁剪对象为DataURL");

    // 计算所有裁剪对象的总边界框
    let totalBounds = null;

    for (const obj of clippedObjects) {
      const objBounds = obj.getBoundingRect(true, true);

      if (!totalBounds) {
        totalBounds = { ...objBounds };
      } else {
        const right = Math.max(
          totalBounds.left + totalBounds.width,
          objBounds.left + objBounds.width
        );
        const bottom = Math.max(
          totalBounds.top + totalBounds.height,
          objBounds.top + objBounds.height
        );

        totalBounds.left = Math.min(totalBounds.left, objBounds.left);
        totalBounds.top = Math.min(totalBounds.top, objBounds.top);
        totalBounds.width = right - totalBounds.left;
        totalBounds.height = bottom - totalBounds.top;
      }
    }

    if (!totalBounds) {
      throw new Error("无法计算对象边界框");
    }

    // 创建临时画布，使用高分辨率
    const tempCanvas = new fabric.StaticCanvas();
    const pixelRatio = window.devicePixelRatio || 1;
    const scaleFactor = Math.max(2, pixelRatio);

    const canvasWidth = Math.ceil(totalBounds.width * scaleFactor);
    const canvasHeight = Math.ceil(totalBounds.height * scaleFactor);

    tempCanvas.setDimensions({
      width: canvasWidth,
      height: canvasHeight,
    });

    // 调整对象位置并添加到临时画布
    for (const obj of clippedObjects) {
      const tempObj = await cloneObjectAsync(obj);

      // 调整位置到画布坐标系
      tempObj.set({
        left: (tempObj.left - totalBounds.left) * scaleFactor,
        top: (tempObj.top - totalBounds.top) * scaleFactor,
        scaleX: (tempObj.scaleX || 1) * scaleFactor,
        scaleY: (tempObj.scaleY || 1) * scaleFactor,
      });

      // 如果有裁剪路径，也需要调整裁剪路径
      if (tempObj.clipPath) {
        tempObj.clipPath.set({
          scaleX: (tempObj.clipPath.scaleX || 1) * scaleFactor,
          scaleY: (tempObj.clipPath.scaleY || 1) * scaleFactor,
        });
      }

      tempCanvas.add(tempObj);
    }

    // 渲染画布
    tempCanvas.renderAll();

    // 获取DataURL
    const dataURL = tempCanvas.toDataURL({
      format: "png",
      quality: 1.0,
      multiplier: 1, // 已经通过尺寸处理了缩放
    });

    // 清理临时画布
    tempCanvas.dispose();

    // console.log("✅ 裁剪对象渲染完成");
    return dataURL;
  } catch (error) {
    console.error("渲染裁剪对象失败:", error);
    throw error;
  }
};

/**
 * 兼容的离屏渲染方法（原有逻辑，作为备选）
 */
const createLegacyRasterization = async ({
  canvas,
  fabricObjects,
  clippingObject,
  scaleFactor,
  quality,
  format,
  isReturenDataURL,
	isCropByBg, // 是否根据背景裁剪
	isEnhanceImg, // 是否是增强图片
}) => {
//   console.log("⚠️ 使用兼容的离屏渲染方法");

  // 这里保留原有的离屏渲染逻辑作为备选方案
  const currentZoom = canvas.getZoom?.() || 1;
  scaleFactor = Math.max(
    scaleFactor || canvas?.getRetinaScaling?.(),
    currentZoom
  );
  scaleFactor = Math.min(scaleFactor, 3);

  const { absoluteBounds, relativeBounds } = calculateBounds(fabricObjects);

  return await createOffscreenRasterization({
    canvas,
    objects: fabricObjects,
    absoluteBounds,
    relativeBounds,
    scaleFactor,
    clippingObject,
    trimWhitespace: true,
    trimPadding: 1,
    quality,
    format,
    currentZoom,
    isReturenDataURL,
		isCropByBg, // 是否根据背景裁剪
		isEnhanceImg, // 是否是增强图片
  });
};

/**
 * 计算对象的绝对边界框和相对边界框
 * @param {Array} fabricObjects fabric对象数组
 * @returns {Object} 包含绝对边界框和相对边界框的对象
 */
const calculateBounds = (fabricObjects) => {
  if (fabricObjects.length === 0) {
    console.warn("⚠️ 没有对象，无法计算边界框");
    return { absoluteBounds: null, relativeBounds: null };
  }

  let absoluteBounds = null;
  let relativeBounds = null;

  fabricObjects.forEach((obj, index) => {
    // 获取相对边界框（考虑画布缩放和平移）
    const relativeBound = obj.getBoundingRect();
    // 获取绝对边界框（原始大小和位置）
    const absoluteBound = obj.getBoundingRect(true, true);

    // console.log(`对象 ${obj.id || index} 边界框比较:`, {
    //   relative: relativeBound,
    //   absolute: absoluteBound,
    //   scaleX: obj.scaleX,
    //   scaleY: obj.scaleY,
    // });

    // 计算绝对边界框的累积范围
    if (!absoluteBounds) {
      absoluteBounds = { ...absoluteBound };
    } else {
      const right = Math.max(
        absoluteBounds.left + absoluteBounds.width,
        absoluteBound.left + absoluteBound.width
      );
      const bottom = Math.max(
        absoluteBounds.top + absoluteBounds.height,
        absoluteBound.top + absoluteBound.height
      );

      absoluteBounds.left = Math.min(absoluteBounds.left, absoluteBound.left);
      absoluteBounds.top = Math.min(absoluteBounds.top, absoluteBound.top);
      absoluteBounds.width = right - absoluteBounds.left;
      absoluteBounds.height = bottom - absoluteBounds.top;
    }

    // 计算相对边界框的累积范围
    if (!relativeBounds) {
      relativeBounds = { ...relativeBound };
    } else {
      const right = Math.max(
        relativeBounds.left + relativeBounds.width,
        relativeBound.left + relativeBound.width
      );
      const bottom = Math.max(
        relativeBounds.top + relativeBounds.height,
        relativeBound.top + relativeBound.height
      );

      relativeBounds.left = Math.min(relativeBounds.left, relativeBound.left);
      relativeBounds.top = Math.min(relativeBounds.top, relativeBound.top);
      relativeBounds.width = right - relativeBounds.left;
      relativeBounds.height = bottom - relativeBounds.top;
    }
  });

  return { absoluteBounds, relativeBounds };
};

/**
 * 创建离屏栅格化渲染
 * @param {Object} options 渲染选项
 * @returns {Promise<fabric.Image>} 栅格化后的图像对象
 */
const createOffscreenRasterization = async ({
  canvas,
  objects,
  absoluteBounds,
  relativeBounds,
  scaleFactor,
  clippingObject,
  trimWhitespace,
  trimPadding,
  quality,
  format,
  currentZoom,
  isReturenDataURL,
	isCropByBg, // 是否根据背景裁剪
	isEnhanceImg, // 是否是增强图片
}) => {
  try {
    // 创建离屏画布，使用绝对尺寸以保证高质量
    const offscreenCanvas = new fabric.StaticCanvas();

    // 如果有裁剪对象，使用裁剪对象的边界框
    let renderBounds = absoluteBounds;
    if (clippingObject) {
      const clippingBounds = clippingObject.getBoundingRect(true, true);
    //   console.log("🎯 使用裁剪对象边界框:", clippingBounds);
      renderBounds = clippingBounds;
    }

    // 设置离屏画布尺寸，并应用高清倍数
    const canvasWidth = Math.ceil(renderBounds.width);
    const canvasHeight = Math.ceil(renderBounds.height);

    offscreenCanvas.setDimensions({
      width: canvasWidth,
      height: canvasHeight,
    });

    // console.log(
    //   `🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`
    // );

    // 克隆对象到离屏画布
    const clonedObjects = [];
    for (const obj of objects) {
      const clonedObj = await cloneObjectAsync(obj);

      // 调整对象位置，相对于渲染边界框的左上角
      clonedObj.set({
        left: clonedObj.left - renderBounds.left,
        top: clonedObj.top - renderBounds.top,
      });

      // 如果有裁剪对象，为每个对象设置裁剪路径
      if (clippingObject) {
        const clippingPath = await cloneObjectAsync(clippingObject);
        clippingPath.set({
          left: clippingPath.left - renderBounds.left,
          top: clippingPath.top - renderBounds.top,
          fill: "",
          stroke: "",
          absolutePositioned: true,
        });
        clonedObj.set({
          clipPath: clippingPath,
        });
      }

      clonedObjects.push(clonedObj);
      offscreenCanvas.add(clonedObj);
    }

    // 渲染离屏画布
    offscreenCanvas.renderAll();

    // 生成图像数据
    const dataURL = offscreenCanvas.toDataURL({
      format,
      quality,
      multiplier: 1, // 已经通过画布尺寸处理了高清倍数
    });

    if (isReturenDataURL) {
      return dataURL; // 如果需要返回DataURL
    }

    // 清理离屏画布
    offscreenCanvas.dispose();

    // 创建fabric.Image对象
    const fabricImage = await createFabricImageFromDataURL(dataURL);

    // 设置图像位置为裁剪区域的位置
    fabricImage.set({
      left: renderBounds.left + renderBounds.width / 2,
      top: renderBounds.top + renderBounds.height / 2,
      originX: "center",
      originY: "center",
    });

    return fabricImage;
  } catch (error) {
    console.error("离屏栅格化失败:", error);
    throw error;
  }
};

/**
 * 异步克隆fabric对象
 * @param {fabric.Object} obj 要克隆的对象
 * @returns {Promise<fabric.Object>} 克隆的对象
 */
const cloneObjectAsync = (obj) => {
  return new Promise((resolve, reject) => {
    obj.clone((cloned) => {
      if (cloned) {
		cloned.set({
			scaleX: obj.scaleX,
			scaleY: obj.scaleY,
			top: obj.top,
			left: obj.left,
			width: obj.width,
			height: obj.height,
			zoomX: obj.zoomX,
			zoomY: obj.zoomY,
		})
        resolve(cloned);
      } else {
        reject(new Error("对象克隆失败"));
      }
    });
  });
};

/**
 * 从DataURL创建fabric.Image对象
 * @param {string} dataURL 图像数据URL
 * @returns {Promise<fabric.Image>} fabric图像对象
 */
const createFabricImageFromDataURL = (dataURL) => {
  return new Promise((resolve, reject) => {
    fabric.Image.fromURL(dataURL, (img) => {
      if (img) {
        resolve(img);
      } else {
        reject(new Error("无法从DataURL创建图像"));
      }
    });
  });
};

/**
 * 计算栅格化图像在当前画布上的正确变换
 * @param {Object} params 计算参数
 * @returns {Object} 变换属性对象
 */
const calculateImageTransform = ({
  absoluteBounds,
  relativeBounds,
  currentZoom,
  scaleFactor,
  imageWidth,
  imageHeight,
}) => {
  // 计算缩放比例：相对尺寸 / 绝对尺寸
  const scaleX = relativeBounds.width / absoluteBounds.width;
  const scaleY = relativeBounds.height / absoluteBounds.height;

  // 由于我们生成的图像是基于绝对尺寸的高清版本，需要考虑scaleFactor
  const finalScaleX = scaleX / scaleFactor;
  const finalScaleY = scaleY / scaleFactor;

  return {
    left: relativeBounds.left + relativeBounds.width / 2, // 设置为中心点
    top: relativeBounds.top + relativeBounds.height / 2, // 设置为中心点
    // scaleX: finalScaleX,
    // scaleY: finalScaleY,
    originX: "center",
    originY: "center",
  };
};

/**
 * 应用遮罩到画布（已弃用，使用clipPath方式）
 * @param {fabric.Canvas} canvas 目标画布
 * @param {fabric.Object} maskObject 遮罩对象
 * @param {Object} bounds 边界框
 */
const applyMaskToCanvas = async (canvas, maskObject, bounds) => {
  // 此方法已被clipPath方式替代
  console.log("⚠️ applyMaskToCanvas已被clipPath方式替代");
};

export const getObjectsBounds = (fabricObjects) => {
  const { absoluteBounds } = calculateBounds(fabricObjects);
  return absoluteBounds;
};

/**
 * 将路径对象转换为遮罩图像
 * @param {Object} clippingObject 裁剪路径对象
 * @param {Object} selectionBounds 选区边界框
 * @param {Number} qualityMultiplier 质量倍数
 * @returns {Promise<String>} 遮罩图像的DataURL
 */
const createMaskImageFromPath = async ({
  clippingObject,
  selectionBounds,
  qualityMultiplier,
}) => {
  try {
    // console.log("🎭 创建路径遮罩图像");

    // 创建专门用于渲染遮罩的画布
    const maskCanvas = new fabric.StaticCanvas();

    const canvasWidth = Math.ceil(selectionBounds.width * qualityMultiplier);
    const canvasHeight = Math.ceil(selectionBounds.height * qualityMultiplier);

    maskCanvas.setDimensions({
      width: canvasWidth,
      height: canvasHeight,
    });

    // 克隆路径对象并处理描边转填充
    const maskPath = await createSolidMaskPath(
      clippingObject,
      selectionBounds,
      qualityMultiplier
    );

    // 添加路径到遮罩画布
    maskCanvas.add(maskPath);
    maskCanvas.renderAll();

    // 生成遮罩图像
    const maskDataURL = maskCanvas.toDataURL({
      format: "png",
      quality: 1.0,
      multiplier: 1,
    });

    // 清理遮罩画布
    maskCanvas.dispose();

    // console.log("✅ 遮罩图像创建完成");
    return maskDataURL;
  } catch (error) {
    console.error("创建遮罩图像失败:", error);
    throw error;
  }
};

/**
 * 渲染内容对象为图像
 * @param {Array} fabricObjects 要渲染的对象数组
 * @param {Object} selectionBounds 选区边界框
 * @param {Number} qualityMultiplier 质量倍数
 * @returns {Promise<String>} 内容图像的DataURL
 */
const renderContentToImage = async ({
  fabricObjects,
  selectionBounds,
  qualityMultiplier,
}) => {
  try {
    // console.log("🖼️ 渲染内容图像");

    // 创建内容渲染画布
    const contentCanvas = new fabric.StaticCanvas();

    const canvasWidth = Math.ceil(selectionBounds.width * qualityMultiplier);
    const canvasHeight = Math.ceil(selectionBounds.height * qualityMultiplier);

    contentCanvas.setDimensions({
      width: canvasWidth,
      height: canvasHeight,
    });

    // 克隆并添加所有需要渲染的对象
    for (let obj of fabricObjects) {
      let clonedObj = await cloneObjectAsync(obj);
      // 调整对象位置：将选区左上角作为新的原点(0,0)
      clonedObj.set({
        left: (clonedObj.left - selectionBounds.left) * qualityMultiplier,
        top: (clonedObj.top - selectionBounds.top) * qualityMultiplier,
        scaleX: (clonedObj.scaleX || 1) * qualityMultiplier,
        scaleY: (clonedObj.scaleY || 1) * qualityMultiplier,
        selectable: false,
        evented: false,
      });

      // 如果有裁剪路径，也需要调整裁剪路径
      if (clonedObj.clipPath && obj.id !== SpecialLayerId.COLOR) {
        clonedObj.clipPath.set({
          left: (clonedObj.clipPath.left - selectionBounds.left) * qualityMultiplier,
          top: (clonedObj.clipPath.top - selectionBounds.top) * qualityMultiplier,
          scaleX: (clonedObj.clipPath.scaleX || 1) * qualityMultiplier,
          scaleY: (clonedObj.clipPath.scaleY || 1) * qualityMultiplier,
        });
        clonedObj.clipPath.setCoords(); // 更新裁剪路径坐标
      }
	//   if(obj.globalCompositeOperation === "multiply"){
	// 	clonedObj.clipPath = null;
	//   }
      contentCanvas.add(clonedObj);
    }

    // 渲染内容画布
    contentCanvas.renderAll();

    // 生成内容图像
    const contentDataURL = contentCanvas.toDataURL({
      format: "png",
      quality: 1.0,
      multiplier: 1,
    });

    // 清理内容画布
    contentCanvas.dispose();

    // console.log("✅ 内容图像渲染完成");
    return contentDataURL;
  } catch (error) {
    console.error("渲染内容图像失败:", error);
    throw error;
  }
};

/**
 * 使用遮罩图像对内容图像进行裁剪
 * @param {String} contentImageDataURL 内容图像DataURL
 * @param {String} maskImageDataURL 遮罩图像DataURL
 * @param {Number} canvasWidth 画布宽度
 * @param {Number} canvasHeight 画布高度
 * @returns {Promise<String>} 裁剪后的图像DataURL
 */
const applyImageMask = async ({
  contentImageDataURL,
  maskImageDataURL,
  canvasWidth,
  canvasHeight,
}) => {
  try {
    // console.log("🎯 应用图像遮罩");

    return new Promise((resolve, reject) => {
      // 创建用于合成的Canvas元素
      const compositeCanvas = document.createElement("canvas");
      const ctx = compositeCanvas.getContext("2d");

      compositeCanvas.width = canvasWidth;
      compositeCanvas.height = canvasHeight;

      // 加载内容图像
      const contentImg = new Image();
      contentImg.onload = () => {
        // 加载遮罩图像
        const maskImg = new Image();
        maskImg.onload = () => {
          try {
            // 先绘制内容图像
            ctx.drawImage(contentImg, 0, 0, canvasWidth, canvasHeight);

            // 设置合成模式为遮罩模式
            ctx.globalCompositeOperation = "destination-in";

            // 绘制遮罩图像
            ctx.drawImage(maskImg, 0, 0, canvasWidth, canvasHeight);

            // 重置合成模式
            ctx.globalCompositeOperation = "source-over";

            // 获取最终结果
            const resultDataURL = compositeCanvas.toDataURL("image/png", 1.0);

            // console.log("✅ 图像遮罩应用完成");
            resolve(resultDataURL);
          } catch (error) {
            console.error("合成图像失败:", error);
            reject(error);
          }
        };

        maskImg.onerror = () => {
          reject(new Error("加载遮罩图像失败"));
        };

        maskImg.src = maskImageDataURL;
      };

      contentImg.onerror = () => {
        reject(new Error("加载内容图像失败"));
      };

      contentImg.src = contentImageDataURL;
    });
  } catch (error) {
    console.error("应用图像遮罩失败:", error);
    throw error;
  }
};

/**
 * 创建带羽化效果的遮罩图像（高级版本）
 * @param {Object} clippingObject 裁剪路径对象
 * @param {Object} selectionBounds 选区边界框
 * @param {Number} qualityMultiplier 质量倍数
 * @param {Number} featherAmount 羽化值
 * @returns {Promise<String>} 遮罩图像的DataURL
 */
const createAdvancedMaskImage = async ({
  clippingObject,
  selectionBounds,
  qualityMultiplier,
  featherAmount = 0,
}) => {
  try {
    // console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`);

    // 创建专门用于渲染遮罩的画布
    const maskCanvas = new fabric.StaticCanvas();

    const canvasWidth = Math.ceil(selectionBounds.width * qualityMultiplier);
    const canvasHeight = Math.ceil(selectionBounds.height * qualityMultiplier);

    maskCanvas.setDimensions({
      width: canvasWidth,
      height: canvasHeight,
    });

    // 克隆路径对象并处理描边转填充
    const maskPath = await createSolidMaskPath(
      clippingObject,
      selectionBounds,
      qualityMultiplier
    );

    // 如果有羽化值，添加模糊效果
    if (featherAmount > 0) {
      const adjustedFeather = featherAmount * qualityMultiplier;
      maskPath.shadow = new fabric.Shadow({
        color: "#ffffff",
        blur: adjustedFeather,
        offsetX: 0,
        offsetY: 0,
      });
    }

    // 添加路径到遮罩画布
    maskCanvas.add(maskPath);
    maskCanvas.renderAll();

    // 如果有羽化，需要进行后处理
    if (featherAmount > 0) {
      return await applyCanvasBlur(
        maskCanvas,
        featherAmount * qualityMultiplier
      );
    }

    // 生成遮罩图像
    const maskDataURL = maskCanvas.toDataURL({
      format: "png",
      quality: 1.0,
      multiplier: 1,
    });

    // 清理遮罩画布
    maskCanvas.dispose();

    // console.log("✅ 高级遮罩图像创建完成");
    return maskDataURL;
  } catch (error) {
    console.error("创建高级遮罩图像失败:", error);
    throw error;
  }
};

/**
 * 对画布应用模糊效果
 * @param {fabric.StaticCanvas} canvas 要处理的画布
 * @param {Number} blurAmount 模糊值
 * @returns {Promise<String>} 处理后的DataURL
 */
const applyCanvasBlur = async (canvas, blurAmount) => {
  try {
    // 获取原始图像数据
    const originalDataURL = canvas.toDataURL({
      format: "png",
      quality: 1.0,
      multiplier: 1,
    });

    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => {
        // 创建一个新的Canvas进行模糊处理
        const blurCanvas = document.createElement("canvas");
        const ctx = blurCanvas.getContext("2d");

        blurCanvas.width = canvas.width;
        blurCanvas.height = canvas.height;

        // 应用CSS滤镜模糊
        ctx.filter = `blur(${Math.max(1, blurAmount / 2)}px)`;
        ctx.drawImage(img, 0, 0);

        // 重置滤镜
        ctx.filter = "none";

        const blurredDataURL = blurCanvas.toDataURL("image/png", 1.0);
        resolve(blurredDataURL);
      };

      img.onerror = () => {
        reject(new Error("处理模糊效果失败"));
      };

      img.src = originalDataURL;
    });
  } catch (error) {
    console.error("应用画布模糊失败:", error);
    throw error;
  }
};

/**
 * 创建实体遮罩路径（将描边转换为填充）
 * @param {Object} clippingObject 原始裁剪对象
 * @param {Object} selectionBounds 选区边界框
 * @param {Number} qualityMultiplier 质量倍数
 * @returns {Promise<fabric.Object>} 处理后的遮罩路径对象
 */
const createSolidMaskPath = async (
  clippingObject,
  selectionBounds,
  qualityMultiplier
) => {
  try {
    // console.log("🔧 创建实体遮罩路径，处理描边转填充");

    // 克隆原始对象
    const maskPath = await cloneObjectAsync(clippingObject);

    // 检查是否有描边需要处理
    const hasStroke = maskPath.stroke && maskPath.strokeWidth > 0;

    if (hasStroke) {
    //   console.log(
    //     `📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}`
    //   );

      // 对于有描边的路径，我们需要更精确的处理
      const strokeWidth = maskPath.strokeWidth;

      // 方法1: 如果是简单的几何形状（矩形、圆形等），可以通过调整尺寸来补偿描边
      if (
        maskPath.type === "rect" ||
        maskPath.type === "circle" ||
        maskPath.type === "ellipse"
      ) {
        // 对于矩形和椭圆，增加宽高来包含描边
        const strokeOffset = strokeWidth;

        maskPath.set({
          left:
            (maskPath.left - selectionBounds.left - strokeOffset / 2) *
            qualityMultiplier,
          top:
            (maskPath.top - selectionBounds.top - strokeOffset / 2) *
            qualityMultiplier,
          scaleX: (maskPath.scaleX || 1) * qualityMultiplier,
          scaleY: (maskPath.scaleY || 1) * qualityMultiplier,
          width: (maskPath.width || 0) + strokeOffset,
          height: (maskPath.height || 0) + strokeOffset,
          fill: "#ffffff",
          stroke: "",
          strokeWidth: 0,
          selectable: false,
          evented: false,
        });
      } else {
        // 对于复杂路径，使用缩放方式来近似包含描边区域
        const pathBounds = maskPath.getBoundingRect(true, true);
        const minDimension = Math.min(pathBounds.width, pathBounds.height);
        const expandRatio = 1 + (strokeWidth * 2) / minDimension;
        const strokeOffset = strokeWidth / 2;

        maskPath.set({
          left:
            (maskPath.left - selectionBounds.left - strokeOffset) *
            qualityMultiplier,
          top:
            (maskPath.top - selectionBounds.top - strokeOffset) *
            qualityMultiplier,
          scaleX: (maskPath.scaleX || 1) * qualityMultiplier * expandRatio,
          scaleY: (maskPath.scaleY || 1) * qualityMultiplier * expandRatio,
          fill: "#ffffff",
          stroke: "",
          strokeWidth: 0,
          selectable: false,
          evented: false,
        });
      }

    //   console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`);
    } else {
      // 没有描边，直接处理位置和缩放
      maskPath.set({
        left: (maskPath.left - selectionBounds.left) * qualityMultiplier,
        top: (maskPath.top - selectionBounds.top) * qualityMultiplier,
        scaleX: (maskPath.scaleX || 1) * qualityMultiplier,
        scaleY: (maskPath.scaleY || 1) * qualityMultiplier,
        fill: "#ffffff", // 白色表示可见区域
        stroke: "", // 确保没有描边
        strokeWidth: 0,
        selectable: false,
        evented: false,
      });
    }

    // 确保对象在画布中心正确对齐
    maskPath.setCoords();

    return maskPath;
  } catch (error) {
    console.error("创建实体遮罩路径失败:", error);
    throw error;
  }
};

/**
 * 优化边界计算，确保遮罩和内容对齐
 * @param {Object} clippingObject 裁剪对象
 * @param {Array} fabricObjects 内容对象数组
 * @returns {Object} 优化后的边界框信息
 */
const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
  try {
    // console.log("📐 计算优化后的边界框");

    // 获取裁剪对象的边界框（包含描边）
    const clippingBounds = clippingObject.getBoundingRect(true, true);

    // 如果有描边，需要调整边界框
    if (clippingObject.stroke && clippingObject.strokeWidth > 0) {
      const strokeWidth = clippingObject.strokeWidth;
      const halfStroke = strokeWidth / 2;

      // 扩展边界框以包含完整的描边区域
      clippingBounds.left -= halfStroke;
      clippingBounds.top -= halfStroke;
      clippingBounds.width += strokeWidth;
      clippingBounds.height += strokeWidth;

    //   console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`);
    }

    // 计算内容对象的边界框
    const contentBounds = calculateBounds(fabricObjects);

    // 使用裁剪边界框作为最终的选区边界框
    const optimizedBounds = {
      ...clippingBounds,
      // 确保边界框不为负数或零
      width: Math.max(1, clippingBounds.width),
      height: Math.max(1, clippingBounds.height),
    };

    // console.log("✅ 边界框优化完成", {
    //   original: clippingObject.getBoundingRect(true, true),
    //   optimized: optimizedBounds,
    //   hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0),
    // });

    return optimizedBounds;
  } catch (error) {
    console.warn("计算优化边界框失败:", error);
    // 返回原始计算方式作为备选
    return clippingObject.getBoundingRect(true, true);
  }
};