fix: 修复多个已知问题

src/component/Canvas/canvasExample.vue

@@ -10,6 +10,7 @@ const canvasEditor = ref();
 const currentView = ref("canvasEditor"); // 默认显示红绿图示例 canvasEditor      redGreenExample
 
 const clothingImageUrl = "/src/assets/work/3.PNG";
+const clothingImageUrlInit = "/src/assets/work/5.PNG";
 
 const imageData = [
   {
@@ -76,11 +77,17 @@ const changeCanvas = (command) => {
   console.log(command);
 };
 
+const changeImageUrl = "/src/assets/work/1.PNG";
 const loadImageUrlToLayer = async () => {
   try {
-    const imageUrl =
-      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABrQAAAZNCAYAAACENbGaAAAAAXNSR0IArs4c6QAAIABJREFUeF7s3Yt208YaBtCflkuhhXLv+z/e4X6HQiFnfbYmTIwDsRM7srS91ixJY8WW9kjjVh8jXS";
-    const layerId = await canvasEditor?.value?.addImageToLayer?.(imageUrl);
+    const layerToLayer1 = canvasEditor?.value?.layers?.[0]?.id;
+    const layerId = await canvasEditor?.value?.addImageToLayer?.(
+      changeImageUrl,
+      {
+        layerId: layerToLayer1, // 指定添加到的图层ID
+        imageMode: "contains", // 设置图片包含在画布内
+      }
+    );
     console.log("新图层ID：", layerId);
   } catch (error) {
     console.error("加载图片到图层失败：", error);
@@ -144,13 +151,19 @@ const handleCustomToolClick = (tool) => {
   tool.action();
 };
 
-const changeImageUrl = "/src/assets/work/1.PNG";
-
 const changeFixedImage = () => {
   canvasEditor.value.changeFixedImage(changeImageUrl, {
     imageMode: "contains", // 设置底图包含在画布内
   });
 };
+
+const canvasInit = () => {
+  console.log("画布初始化完成");
+  // 可以在这里执行一些初始化逻辑
+  canvasEditor.value.changeFixedImage(clothingImageUrlInit, {
+    imageMode: "contains", // 设置底图包含在画布内
+  });
+};
 </script>
 
 <template>
@@ -175,6 +188,7 @@ const changeFixedImage = () => {
           imageMode: 'contains', // 设置底图包含在画布内
         }"
         @change-canvas="changeCanvas"
+        @canvas-init="canvasInit"
         isFixedErasable
         showFixedLayer
       >