aida_front/src/component/modules/generalMiniCanvas.vue

<template>
	<div class="generalCanvas">
		<div class="canvasBox" ref="canvasBox">
			<editCanvas v-if="canvasLoad" :config="canvasConfig" :clothingImageUrl="imgUrl" ref="editCanvas"></editCanvas>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
	</div>
</template>
<script>
import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneralCopy";
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";


export default defineComponent({
    components: {
		editCanvas,
    },
	props:{
		imgUrl:{
			type:String,
			default:''
		}
	},
	emits:['submitBase64Data'],
    setup(props,{emit}) {
		const { t } = useI18n();
		const store = useStore();
		const isShowMark = ref(false)
		const component = reactive({
		})
		const data = reactive({
			canvasLoad:false,
			canvasConfig:{

			},
		})
		const dataDom = reactive({
			editCanvas:null,
			canvasBox:null,
		})
		const openSetData = ()=>{
			data.canvasLoad = true
		}
		const addImage = (value)=>{
			console.log(value)
			dataDom.editCanvas.addImageToLayer(value.imgUrl)
		}
		const addBottomImage = (value)=>{
			dataDom.editCanvas.changeFixedImage(value)
		}
		const getData = async ()=>{
		
		}
		const getCanvasData = ()=>{
			
			return canvasExport
		}
        onMounted(() => {
			if(props.imgUrl){
				let img = new Image()
				img.onload = ()=>{
					let domHeight = dataDom.canvasBox.offsetHeight
					let imgHeight = img.height
					data.canvasConfig.height = domHeight
					data.canvasConfig.width = imgHeight/domHeight * img.width
					// canvasWH.value = height
					// // canvasBox.style.width = height+'px'
					// 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
					// }
					// ratio = [wScale,hScale]
					// canvas = canvasGeneral.canvasInit(canvasBox,{
					// 	width:canvasWH.value * wScale,
					// 	height:canvasWH.value * hScale,
					// })
					// canvas.selection = false;
					// dataDom.editCanvas.addImageToLayer(img)
					data.canvasLoad = true
				}
				img.src = props.imgUrl
			}else{
				data.canvasLoad = true
			}
		});
		onBeforeUnmount(()=>{
			data.canvasLoad = false
			// canvasGeneral.canvasClear()
		})
        return {
			...toRefs(data),
			...toRefs(dataDom),
			isShowMark,
			addImage,
			getData,
			getCanvasData,
        };
    },
    data(prop) {
        return {
		};
    },
	computed: {
	},
    watch: {
      
    },
    mounted() {},

    methods: {
		
	},
});
</script>
<style lang="less" scoped>
.generalCanvas{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-top: 4rem;
	> .canvasBox{
		flex: 1;
		position: relative;
	}
}
</style>