aida_front/src/component/modules/generalMiniCanvas.vue

<template>
	<div class="generalCanvas">
		<div class="canvasBox" ref="canvasBox">
			<editCanvas v-if="canvasLoad" :config="canvasConfig" 
				@canvasInit="canvasInit"
				
				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 canvasLoadAddImg = (url,id)=>{
			console.log(url,{layerId:id,undoable:false})
			dataDom.editCanvas.layers[0].id
			dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas,imageMode:'contains',undoable:false})
		}
		const canvasInit = (value)=>{
			// return
			console.log(value,123123)
			setTimeout(()=>{
				canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
			},1000)
		}
		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]
					let domHeight = dataDom.canvasBox.offsetHeight - 200
					let imgHeight = img.height
					wH = [1,domHeight/imgHeight]
					data.canvasConfig.height = domHeight
					data.canvasConfig.width = wH[1] * img.width
					data.canvasLoad = true
					// setTimeout(()=>{
					// 	canvasLoadAddImg()
					// },3000)
				}
				img.src = props.imgUrl
			}else{
				data.canvasLoad = true
			}
		});
		onBeforeUnmount(()=>{
			data.canvasLoad = false
			// canvasGeneral.canvasClear()
		})
        return {
			...toRefs(data),
			...toRefs(dataDom),
			isShowMark,
			canvasLoadAddImg,
			getCanvasData,
			canvasSave,
			canvasInit,
        };
    },
    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>