合并画布，部分样式调整

src/component/DetailCopy/canvas/index.vue

@@ -18,9 +18,10 @@
 					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
 				</div> -->
 				<div class="contet">
-					<div class="canvas" v-show="!isEditFrontBack" @click.stop>
+					<div class="canvas" v-if="!isEditFrontBack" @click.stop>
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:clothingImageUrl="selectDetail.undividedLayer" 
+							isFixedErasable
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
@@ -34,7 +35,7 @@
 							
 							ref="editFrontBack">
 						</editFrontBack> -->
-						<editCanvas v-if="isEditFrontBack" :config="canvasConfig" 
+						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
 							:clothingImageUrl="selectDetail.undividedLayer" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
@@ -50,8 +51,8 @@
 					<div class="gallery_btn" @click="privewDetail">Finish</div>
 				</div> -->
 			</div>
-			<div class="Finish">
-				<div class="gallery_btn" @click="editFront">EditFrontBack</div>
+			<div class="Finish" style="text-align: right;margin-top:1rem;">
+				<div class="gallery_btn" style="line-height: 4rem;padding: 0 1rem;" @click="editFront">EditFrontBack</div>
 			</div>
 		 </div>
 		
@@ -90,6 +91,7 @@ export default defineComponent({
 			editFrontBack:null as any,
 			model:null,
 			editCanvas:null as any,
+			editCanvasBackFront:null as any,
 			canvasContent:null as any,
 		})
 		const userDetail = computed(()=>{
@@ -134,24 +136,52 @@ export default defineComponent({
 			setLiquefaction()
 		}
 		const editFront = ()=>{//编辑前后片
+
+			let canvasJSON = '' as any
+			if(!detailData.isEditFrontBack){
+				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
+				canvasJSON = sessionStorage.getItem('frontBackEdit');
+			}else{
+				sessionStorage.setItem('frontBackEdit',detailDom.editCanvasBackFront.getJSON())
+				canvasJSON = sessionStorage.getItem('sketchEdit');
+			}
+			detailData.canvasLoad = false
 			detailData.isEditFrontBack = !detailData.isEditFrontBack
-			if(detailData.isEditFrontBack){
+			if(canvasJSON){
+				detailData.canvasLoad = true
 				nextTick(()=>{
-					setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
-						detailData.isEditFrontBack = true
-					})
-			    	// detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
-				    // detailData.canvasObj.currentOperation = false
-				    // detailData.frontBackCanvasObj.currentOperation = true
+					if(!detailData.isEditFrontBack){
+						detailDom.editCanvas.loadJSON(canvasJSON)
+					}else{
+						detailDom.editCanvasBackFront.loadJSON(canvasJSON)
+					}
 				})
 			}else{
-				// detailData.canvasObj.currentOperation = true
-				// detailData.frontBackCanvasObj.currentOperation = false
+				if(!detailData.isEditFrontBack){
+					nextTick(()=>{
+						setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
+							detailData.canvasLoad = true
+						})
+					})
+				}else{
+					nextTick(()=>{
+						setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
+							detailData.canvasLoad = true
+						})
+					})
+				}
 			}
 		}
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
-			let data = await detailData.canvasObj.detailSubmit()
-			if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
+			return new Promise((res,reject)=>{
+				detailDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
+					// let data = await detailData.canvasObj.detailSubmit()
+					if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
+					res('')
+				})
+			})
+			
+			
 		}
 		const setFrontBackColor = (data:any)=>{
 			detailDom.editFrontBack.setBackground(data)
@@ -164,9 +194,6 @@ export default defineComponent({
 					let domHeight = detailDom.canvasContent.offsetHeight - 200
 					let imgHeight = img.height
 					wH = [1,domHeight/imgHeight]
-					console.log(domHeight,img.height,img.width)
-					console.log(detailData.selectDetail.undividedLayer)
-					console.log(detailData.canvasConfig)
 					detailData.canvasConfig.width = img.width * wH[1]
 					detailData.canvasConfig.height = domHeight
 
@@ -189,6 +216,9 @@ export default defineComponent({
 
 		}
 		onBeforeUnmount(()=>{
+			console.log(12312)
+			sessionStorage.removeItem('frontBackEdit');
+			sessionStorage.removeItem('sketchEdit');
 			detailData.canvasLoad = false
 			privewDetail()
 		})