调整detail拉伸sketch但是编辑印花和画布使用的sketch不受影响

src/component/Detail/canvas/index.vue

@@ -185,12 +185,55 @@ export default defineComponent({
 				img.src = url
 			})
 		}
+
+		const resizeImageWithNativeCanvas = async (image1Url, imageBUrl)=>{
+			try {
+				// 加载第一张图片获取尺寸
+				const img1 = await loadImage(image1Url);
+				const targetWidth = img1.naturalWidth;
+				const targetHeight = img1.naturalHeight;
+				
+				// 加载第二张图片
+				const imgB = await loadImage(imageBUrl);
+				
+				// 创建canvas元素
+				const canvas = document.createElement('canvas');
+				canvas.width = targetWidth;
+				canvas.height = targetHeight;
+				const ctx = canvas.getContext('2d');
+				
+				// 绘制调整尺寸后的图片
+				ctx.drawImage(imgB, 0, 0, targetWidth, targetHeight);
+				
+				// 导出base64
+				const base64 = canvas.toDataURL('image/png', 1);
+				
+				return base64;
+			} catch (error) {
+				console.error('处理图片时出错:', error);
+				throw error;
+			}
+		}
+
+			// 图片加载辅助函数
+		const loadImage = (url)=>{
+			return new Promise((resolve, reject) => {
+				const img = new Image();
+				img.crossOrigin = 'anonymous';
+				img.onload = () => resolve(img);
+				img.onerror = reject;
+				img.src = url;
+			});
+		}
+
+
 		const frontBackChange = (value:any)=>{
 			let full = detailData.frontBack.front[detailData.imgDomIndex].undividedLayer || detailData.selectDetail.path
 			let size = {
 				...detailData.canvasConfig,
 			}
-			segmentImage(value,full,size).then((rv)=>{
+
+			segmentImage(value,full,size).then(async (rv)=>{
 				let front = detailData.frontBack.front[detailData.imgDomIndex]
 				let back = detailData.frontBack.back[detailData.imgDomIndex]
 				if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
@@ -199,7 +242,8 @@ export default defineComponent({
 				if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
 
 				front.imageUrl = rv.targetFrontUrl
-				front.maskUrl = value
+				let base64 = await resizeImageWithNativeCanvas(front.oldMaskUrl,value)
+				front.maskUrl = base64
 				back.imageUrl = rv.targetBackUrl
 				store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			})