画布印花合成

src/component/Canvas/canvasExample.vue

@@ -9,8 +9,8 @@ import ToolButton from "@/component/Canvas/ExistsImageList/ToolButton.vue";
 const canvasEditor = ref();
 const currentView = ref("canvasEditor"); // 默认显示红绿图示例 canvasEditor      redGreenExample
 
-const clothingImageUrl = "https://www.minio-api.aida.com.hk/aida-collection-element/24299/Printboard/4eba03bd-4367-4c69-b1a3-3f3177a1be1f.jpg?response-content-type=image%2Fjpeg&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251217%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251217T081126Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b8223ba37625370c9716024536a08ce1ee5c5a7aaefc47d9baf8bd1e0e4d2d91";
-const clothingImageUrlInit = "/src/assets/work/5.PNG";
+const clothingImageUrl = "/src/assets/images/canvas/xiangao.png";
+const clothingImageUrlInit = "/src/assets/images/canvas/xiangaofenge.png";
 
 const imageData = [
   {
@@ -71,7 +71,7 @@ const editorConfig = {
 const exportImage = async () => {
   if (canvasEditor.value) {
     const base64 = await canvasEditor.value.exportImage({
-      isContainFixed: true, // 是否导出底图
+      isContainFixed: false, // 是否导出底图
       isContainBg: false, // 是否导出背景
     });
 
@@ -272,6 +272,31 @@ const customToolsList = ref([
     class: "export-btn",
   },
 ]);
+const otherData = {
+    color: {rgba: {r:255,g:0,b:0,a:1}},
+    printObject: {
+        prints: [
+            {
+                ifSingle: true,
+                level2Type: "Pattern",
+                designType: "Library",
+                path: "/src/assets/images/canvas/yinhua1.jpg",
+                location: [250, 780],
+                scale: [0.5 * 0.7, 0.272541 * 0.7],
+                angle: 0,
+            },
+			{
+                ifSingle: true,
+                level2Type: "Pattern",
+                designType: "Library",
+                path: "/src/assets/images/canvas/yinhua1.jpg",
+                location: [300, 500],
+                scale: [0.5 * 0.4, 0.272541 * 0.4],
+                angle: 0,
+            }
+        ]
+    },
+}
 </script>
 
 <template>
@@ -301,6 +326,8 @@ const customToolsList = ref([
         v-if="currentView === 'canvasEditor'"
         :config="editorConfig"
         :clothingImageUrl="clothingImageUrl"
+		:clothingImageUrl2="clothingImageUrlInit"
+		:otherData="otherData"
         :clothing-image-opts="{
           imageMode: 'contains', // 设置底图包含在画布内
         }"