aida_front/src/component/modules/generalMiniCanvas.vue

<template>
	<div class="generalCanvas">
		<div class="canvasBox" ref="canvasBox">
			<editCanvas v-if="canvasLoad" :config="canvasConfig" 
				:clothingImageUrl="imgUrl" 
				:clothing-image-opts="{
					imageMode:'contains',
				}"
				ref="editCanvas"></editCanvas>
		</div>
		<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin: 0 auto;">Save</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
		}
		const canvasSave = ()=>{
			dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
				emit('submitBase64Data',rv)
			})
		}
        onMounted(() => {
			if(props.imgUrl){
				let img = new Image()
				img.onload = ()=>{
					let wH = [1,1]
					// if(img.width > img.height){
					// 	let domHeight = dataDom.canvasBox.offsetWidth
					// 	let imgWidth = img.width
					// 	data.canvasConfig.height = domHeight
					// 	data.canvasConfig.width = imgHeight/domHeight * img.width
					// }else{
						
					// }
					
					let domHeight = dataDom.canvasBox.offsetHeight - 200
					let imgHeight = img.height
					wH = [1,domHeight/imgHeight]
					console.log(domHeight,img.height,img.width)
					data.canvasConfig.height = domHeight
					data.canvasConfig.width = wH[1] * 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,
			canvasSave,
        };
    },
    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>