页面调整

src/component/modules/generalMiniCanvas.vue

@@ -3,10 +3,14 @@
 		<div class="canvasBox" ref="canvasBox">
 			<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 				@canvasInit="canvasInit"
-				
+				@changeCanvas="changeCanvas"
 				ref="editCanvas"></editCanvas>
 		</div>
-		<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin: 0 auto;">Save</div>
+		<div class="btn">
+			<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin-top: auto;">Save</div>
+			<div class="gallery_btn" @click="exportElement">Export</div>
+		</div>
+
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
 		</div>
@@ -31,9 +35,17 @@ export default defineComponent({
 		imgUrl:{
 			type:String,
 			default:''
+		},
+		source:{
+			type:String,
+			default:''
+		},
+		isSubmitCanvasJSON:{
+			type:Boolean,
+			default:false
 		}
 	},
-	emits:['submitBase64Data'],
+	emits:['submitBase64Data','canvasChangeGetJSON'],
     setup(props,{emit}) {
 		const { t } = useI18n();
 		const store = useStore();
@@ -54,26 +66,36 @@ export default defineComponent({
 			data.canvasLoad = true
 		}
 		const canvasLoadAddImg = (url,id)=>{
-			console.log(url,{layerId:id,undoable:false})
-			dataDom.editCanvas.layers[0].id
-			dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas,imageMode:'contains',undoable:false})
+			dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas.layers[0].id,imageMode:'contains',undoable:false})
 		}
 		const canvasInit = (value)=>{
-			// return
-			console.log(value,123123)
-			setTimeout(()=>{
-				canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
-			},1000)
+			canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
 		}
 		const getCanvasData = ()=>{
 			
 			return canvasExport
 		}
 		const canvasSave = ()=>{
-			dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
-				emit('submitBase64Data',rv)
+			if(props.isSubmitCanvasJSON){
+				emit('canvasChangeGetJSON',{canvasJSON:dataDom.editCanvas.getJSON(),submitDate:0})
+			}else{
+				// dataDom.editCanvas.exportImage({isContainBg:props.source == 'detail',isContainFixed:true}).then((rv)=>{
+				// 	emit('submitBase64Data',rv)
+				// })
+				dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:true}).then((rv)=>{
+					emit('submitBase64Data',rv)
+				})
+			}
+			
+		}
+		const exportElement = ()=>{
+			canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
+				downloadBase64Image(rv,'canvas')
 			})
 		}
+		const changeCanvas = ()=>{
+			emit('canvasChangeGetJSON',{canvasJSON:dataDom.editCanvas.getJSON(),submitDate:5000})
+		}
         onMounted(() => {
 			if(props.imgUrl){
 				let img = new Image()
@@ -106,6 +128,8 @@ export default defineComponent({
 			getCanvasData,
 			canvasSave,
 			canvasInit,
+			exportElement,
+			changeCanvas,
         };
     },
     data(prop) {
@@ -130,12 +154,21 @@ export default defineComponent({
 	height: 100%;
 	position: relative;
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	overflow: hidden;
 	padding-top: 4rem;
 	> .canvasBox{
 		flex: 1;
 		position: relative;
 	}
+	> .btn{
+		margin-top: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		> div{
+			margin-top: 1rem;
+		}
+	}
 }
 </style>