上传系统模特

src/component/modules/liquefaction.vue

@@ -95,6 +95,8 @@ export default defineComponent({
 			let img = new Image()
 			img.setAttribute('crossOrigin', 'Anonymous')
 			img.onload = () => {
+				canvasImgData.width = img.width
+				canvasImgData.height = img.height
 				let canvasBox = document.querySelector('.liquefaction .liquefaction_canvas_box')
 				let width = canvasBox.offsetHeight / img.height * img.width
 				canvas = document.getElementById('c')
@@ -295,6 +297,41 @@ export default defineComponent({
 			}
 		}
 		let submit = ()=>{
+			const newCanvas = document.createElement('canvas');
+			let exportCanvas = new fabric.Canvas(newCanvas, {
+				width: canvasImgData.width,
+				height:canvasImgData.height,
+				isDrawingMode: false, // 开启绘图模式
+			});
+			fabric.Image.fromURL(canvas.toDataURL('png'), function(img) {
+				img.scaleToWidth(exportCanvas.width);
+				img.scaleToHeight(exportCanvas.height);
+				img.set({
+					scaleX: exportCanvas.width / img.width,
+					scaleY: exportCanvas.height / img.height
+				});
+				exportCanvas.setBackgroundImage(img, exportCanvas.renderAll.bind(exportCanvas));
+				let data = exportCanvas.toDataURL({
+					format: "png", // 导出格式为 PNG
+					quality: 1, // 图片质量为 1（最高质量）
+				});
+			},{ crossOrigin: "Anonymous" });
+
+			
+            // newCanvas.width = canvasImgData.width;
+            // newCanvas.height = canvasImgData.height;
+			// const newCtx = newCanvas.getContext('2d');
+			// newCtx.drawImage(
+            //     canvas,  
+            //     0, 0,                   
+            //     canvas.width,
+            //     canvas.height, 
+            //     0, 0,               
+			// 	newCanvas.width,     
+            //     newCanvas.height  
+            // );
+			// console.log(exportCanvas.toDataURL('jpg'));
+			
 			emit('submitLiquefaction',canvas.toDataURL('image/png'))
 			cancelDsign()
 		}