feat: 修复画布部分bug

src/component/Canvas/CanvasEditor/utils/imageHelper.js

@@ -207,6 +207,58 @@ export async function addImageToLayer({
   }
 }
 
+/**
+ * 从base64或者url加载图片并创建图层
+ * @param {str} imageUrl -  base64字符串或图片URL
+ * @param {Object} layerManager - 图层管理器
+ * @param {Object} canvas - fabric.js画布实例
+ * @param {Object} options - 配置选项
+ * @returns {Promise<string>} 新图层ID的Promise
+ */
+export function loadImageUrlToLayer(
+  { imageUrl, layerManager, canvas, toolManager },
+  options = {}
+) {
+  return new Promise(async (resolve, reject) => {
+    if (!imageUrl || !layerManager || !canvas) {
+      reject(new Error("参数无效"));
+      return;
+    }
+
+    try {
+      // 查找背景图层以获取尺寸
+      const bgLayer = layerManager.layers.value.find(
+        (layer) => layer.isBackground
+      );
+
+      // 设置最大宽高为背景图层的尺寸
+      const maxWidth = bgLayer?.canvasWidth || canvas.width;
+      const maxHeight = bgLayer?.canvasHeight || canvas.height;
+
+      // 加载并处理图片
+      const fabricImage = await loadImage(imageUrl, {
+        maxWidth: maxWidth * 0.8, // 默认图片最大宽度为背景宽度的80%
+        maxHeight: maxHeight * 0.8, // 默认图片最大高度为背景高度的80%
+        canvasWidth: canvas.width,
+        canvasHeight: canvas.height,
+        ...options,
+      });
+
+      // 创建图片图层
+      const layerId = await createImageLayer({
+        layerManager,
+        fabricImage,
+        toolManager,
+      });
+
+      resolve(layerId);
+    } catch (error) {
+      console.error("处理图片失败:", error);
+      reject(error);
+    }
+  });
+}
+
 /**
  * 从File对象加载图片并创建图层
  * @param {File} file - 文件对象