页面调整

src/component/Canvas/index.vue

@@ -1,18 +1,15 @@
 <template>
-  <div class="red-green-mode-example">
+  <div class="canvasBox">
     <!-- 画布编辑器 - 永久启用红绿图模式 -->
     <div class="canvas-wrapper">
-      <div class="canvas-wrapper-btns">
-        <div @click="getJSON">获取JSON</div>
-        <div @click="loadJSON">读取JSON</div>
-      </div>
       <CanvasEditor
         ref="canvasEditor"
         :enabledRedGreenMode="false"
-        :clothingImageUrl="imageUrls.baseImage"
-        :redGreenImageUrl="imageUrls.maskImage"
       />
     </div>
+	<div class="btn">123
+		<div class="gallery_btn" @click="exportElement">Export</div>
+	</div>
   </div>
 </template>
 
@@ -23,11 +20,6 @@ import CanvasEditor from "./CanvasEditor/index.vue";
 // 画布编辑器引用
 const canvasEditor = ref(null);
 
-// 图像URL配置
-const imageUrls = {
-  baseImage: "@/assets/redGreenPic/clothing_base_image.png",
-  maskImage: "@/assets/redGreenPic/clothing_mask_image.png",
-};
 const getJSON = () => {
   if (canvasEditor.value) {
     const json = canvasEditor.value.getJSON();
@@ -43,7 +35,42 @@ const loadJSON = () => {
     console.log("加载的JSON数据：", currentJSON);
   }
 };
+const exportElement = ()=>{
+	canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false}).then((rv)=>{
+		console.log(rv)
+		downloadBase64Image(rv,'canvas')
+	})
+}
+function downloadBase64Image(base64Data, filename) {
+  // 1. 提取MIME类型（自动处理各种Base64前缀）
+  const mimeMatch = base64Data.match(/^data:(.+?);base64,/);
+  if (!mimeMatch) {
+    console.error('Invalid Base64 data');
+    return;
+  }
+  // 2. 获取扩展名
+  const mimeType = mimeMatch[1];
+  const extension = mimeType.split('/')[1] || 'png';
 
+  // 3. 转换Base64为Blob
+  const byteString = atob(base64Data.split(',')[1]);
+  const ab = new ArrayBuffer(byteString.length);
+  const ia = new Uint8Array(ab);
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+  const blob = new Blob([ab], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${filename}.${extension}`;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(() => {
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, 100);
+}
 // 组件挂载时绑定键盘事件
 onMounted(() => {});
 
@@ -52,14 +79,16 @@ onUnmounted(() => {});
 </script>
 
 <style scoped lang="less">
-.red-green-mode-example {
+.canvasBox {
   width: 100%;
 //   height: 100vh;
 	height: 100%;
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	// flex-direction: column;
+}
+.btn{
+	margin-top: auto;
 }
-
 .canvas-wrapper {
   flex: 1;
   position: relative;

src/component/Canvas/test.vue

@@ -14,7 +14,7 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
 						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
 						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
 					</svg>