上传系统模特

src/component/modules/generalMiniCanvas.vue

@@ -10,6 +10,7 @@
 				<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
 				<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
 				<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+				<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
 				<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
 				<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
 			</div>
@@ -27,6 +28,7 @@
 				{{ $t('addDetails.submit') }}
 			</div>
 		</div>
+		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
 	</div>
 </template>
 <script>
@@ -42,10 +44,11 @@ import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage
 import { useI18n } from "vue-i18n";
 import canvasGeneral from "@/tool/canvasGeneral";
 import { getMousePosition } from "@/tool/mdEvent";
+import liquefaction from "@/component/modules/liquefaction.vue";
 export default defineComponent({
     components: {
 		creditsDetail,
-		allOrder,
+		allOrder,liquefaction
     },
 	emits: ['submitBase64Data'],
 	props: {
@@ -164,24 +167,24 @@ export default defineComponent({
 							updateCanvasState('mouseUp')
 						}
 					});
-					canvas.on('mouse:wheel', opt => {
+					// canvas.on('mouse:wheel', opt => {
 						
-						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
-						let zoom = canvas.getZoom() // 获取画布当前缩放值
-						zoom *= 0.999 ** delta
-						if (zoom > 20) zoom = 20
-						if (zoom < 0.01) zoom = 0.01
-						// console.log(zoom);
-						canvas.zoomToPoint(
-							{ // 关键点
-							x: opt.e.offsetX,
-							y: opt.e.offsetY
-							},
-							zoom
-						)
-						opt.e.preventDefault()
-						opt.e.stopPropagation()
-					})
+					// 	const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
+					// 	let zoom = canvas.getZoom() // 获取画布当前缩放值
+					// 	zoom *= 0.999 ** delta
+					// 	if (zoom > 20) zoom = 20
+					// 	if (zoom < 0.01) zoom = 0.01
+					// 	// console.log(zoom);
+					// 	canvas.zoomToPoint(
+					// 		{ // 关键点
+					// 		x: opt.e.offsetX,
+					// 		y: opt.e.offsetY
+					// 		},
+					// 		zoom
+					// 	)
+					// 	opt.e.preventDefault()
+					// 	opt.e.stopPropagation()
+					// })
 
 					//画布上移动
 					document.addEventListener('mousemove', mouseMove);
@@ -358,6 +361,7 @@ export default defineComponent({
 				let data = exportCanvas.toDataURL('jpg')
 				cancelDsign()
 				clearCanvas()
+				console.log(data);
 				emit('submitBase64Data',data)
 			})
 		}
@@ -366,6 +370,47 @@ export default defineComponent({
 			document.removeEventListener('keyup', canvasKeyUp);
 			showPayOrder.value = false
 		}
+		let liquefactionData = ref(null)
+		let liquefaction = ref(null)
+		let submitLiquefaction = (rv)=>{
+			const originalWidth = liquefactionData.value.width // 保存原始宽度
+			const originalHeight = liquefactionData.value.height; // 保存原始高度
+			liquefactionData.value.setSrc(rv, function(img) {
+				let wScale = 1
+				let hScale = 1
+				if(img.width>img.height){
+					hScale = img.height/img.width
+					exportWH = img.width
+				}else{
+					wScale = img.width/img.height
+					exportWH = img.height
+				}
+				img.scaleToWidth(canvas.width);
+				img.scaleToHeight(canvas.height);
+				img.set({
+					scaleX: canvas.width / img.width,
+					scaleY: canvas.height / img.height
+				});
+				// img.set({
+				// 	scaleX: 1,
+				// 	scaleY: 1
+				// });
+			
+				canvas.renderAll();
+			});
+		}
+		let setLiquefaction = ()=>{
+			const activeObjects = canvas.backgroundImage // 获取选中的对象
+			if (activeObjects) {
+				liquefactionData.value = activeObjects
+				console.log(liquefactionData.value);
+				
+				liquefaction.value.init(activeObjects)
+			} else {
+				// message.info(useI18.t('exportModel.jsContent6'))
+				return null;
+			}
+		}
         return {
             presentState,
             showPayOrder,
@@ -373,12 +418,17 @@ export default defineComponent({
             t,
 			pencilbtnStyle,
 			...toRefs(canvasBtn),
+
+			liquefactionData,
+			liquefaction,
 			init,
 			setOperation,
 			setPencilWidth,
 			historyState,
 			setSubmit,
 			cancelDsign,
+			submitLiquefaction,
+			setLiquefaction,
         };
     },
     data() {