141 lines
3.0 KiB
Vue
141 lines
3.0 KiB
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> |