修复印花线稿合成图显示异常

src/component/Detail/canvas/index.vue

@@ -13,8 +13,6 @@
 							:clothingImageUrl="selectDetail.path"
 							:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
 							showFixedLayer
-							:width="sketchWidth"
-							:height="sketchHeight"
 							:canvasJSON="canvasJSON"
 							@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
 							:clothing-image-opts="{
@@ -81,7 +79,11 @@ export default defineComponent({
 		updateOtherLayers:{
 			type:Function,
 			default:()=>{}
-		}
+		},
+		sketchSize:{
+			type:Object,
+			default:()=>{}
+		},
 	},
     setup(props,{emit}) {
         const store = useStore();
@@ -121,8 +123,6 @@ export default defineComponent({
 				printObject: store.state.DesignDetail.selectDetail.printObject,
 				trims: store.state.DesignDetail.selectDetail.trims,
 			})),
-			sketchWidth:0,
-			sketchHeight:0,
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -177,7 +177,11 @@ export default defineComponent({
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
 			// if(!detailDom.editCanvas)return
 			return new Promise(async (res,reject)=>{
-				await detailDom.editCanvas.exportImage({isContainFixed:true}).then((rv)=>{
+				await detailDom.editCanvas.exportImage({
+					isContainFixed:true,
+					width:props.sketchSize.width,
+					height:props.sketchSize.height,
+				}).then((rv)=>{
 					if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
 				})
 				//包含平铺图层 single+overall模式的图
@@ -188,6 +192,7 @@ export default defineComponent({
 				// await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
 				// 	oldSelectDetail.undividedLayer = rv
 				// })
+				await setUndivideLayer()
 				res('')
 			})
 		}
@@ -203,11 +208,14 @@ export default defineComponent({
 				let img = new Image()
 				img.onload = ()=>{
 					let wH = [1,1]
-					let domHeight = detailDom.canvasContent.offsetHeight - 200
+					let domHeight = detailDom.canvasContent?.offsetHeight - 200
 					let imgHeight = img.height
 					wH = [1,domHeight/imgHeight]
-					detailData.canvasConfig.width = img.width * wH[1]
-					detailData.canvasConfig.height = domHeight
+					// detailData.canvasConfig.width = img.width * wH[1]
+					// detailData.canvasConfig.height = domHeight
+					console.log(detailData.canvasConfig,'===============')
+					detailData.canvasConfig.width = img.width
+					detailData.canvasConfig.height = img.height
 
 					res('')
 				}
@@ -335,34 +343,45 @@ export default defineComponent({
 		// }
 		const canvasLoadJsonSuccess = async ()=>{
 			let otherData = await props.updateOtherLayers()
-			updateOtherLayers(otherData)
-			if(!detailData.selectDetail.undividedLayerColor){
-				await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsRepeat:false,isPrintTrimsNoRepeat:false,isContainNormalLayer:false}).then((rv)=>{
-					detailData.selectDetail.undividedLayerColor = rv
-				})
-			}
-			if(!detailData.selectDetail.undividedLayer){
-				await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
-					detailData.selectDetail.undividedLayer = rv
-				})
-			}
+
+			await updateOtherLayers(otherData)
+			await setUndivideLayer()
+		}
+		const setUndivideLayer = async ()=>{
+			await new Promise<void>(async (resolve, reject) => {
+				// if(!detailData.selectDetail.undividedLayerColor){
+					await detailDom.editCanvas.exportImage({
+						isContainFixed:true,
+						isPrintTrimsRepeat:false,
+						isPrintTrimsNoRepeat:false,
+						isContainNormalLayer:false,
+						width:props.sketchSize.width,
+						height:props.sketchSize.height}).then((rv)=>{
+						detailData.selectDetail.undividedLayerColor = rv
+					})
+				// }
+				// if(!detailData.selectDetail.undividedLayer){
+					await detailDom.editCanvas.exportImage({
+						isContainFixed:true,
+						isPrintTrimsNoRepeat:false,
+						isPrintTrimsRepeat:true,
+						isContainNormalLayer:false,
+						width:props.sketchSize.width,
+						height:props.sketchSize.height,
+					}).then((rv)=>{
+						console.log(rv,'======')
+						detailData.selectDetail.undividedLayer = rv
+					})
+				// }
+				resolve()
+			})
+			
 		}
 
 		const submitBase64Data = ()=>{
 			return detailDom.generalMiniCanvas.submitBase64Data()
 		}
-		const sketchSize:any = async ()=>{
-			let img = new Image();
-			img.src = detailData.selectDetail.path;	
-			await new Promise((resolve, reject) => {
-				img.onload = () => {
-					detailData.sketchWidth = img.width
-					detailData.sketchHeight = img.height
-					resolve([img.width, img.height]);
-				}
-				img.onerror = reject;
-			});
-		}
+	
 		onBeforeUnmount(()=>{
 			let front = detailData.frontBack.front[detailData.imgDomIndex]
 			let back = detailData.frontBack.back[detailData.imgDomIndex]
@@ -403,7 +422,6 @@ export default defineComponent({
 						});
 					})
 				}
-				await sketchSize()
 				setCanvas(detailData.selectDetail.path).then(()=>{
 					detailData.canvasLoad = true
 				})