深度画布 矩形工具

src/components/Canvas/DepthCanvas/depth-canvas.vue

@@ -6,7 +6,12 @@
 		<template v-if="isReady">
 			<layer-panel />
 			<details-panel />
-			<depth-header-tools @export="exportCanvas" @import="importCanvas" />
+			<depth-header-tools
+				@export="exportCanvas"
+				@export-local="exportCanvasToLocalStorage"
+				@import-local="importCanvasFromLocalStorage"
+				@export-close="exportCanvasAndClose"
+			/>
 			<brush-control-panel :currentTool="toolManager.currentTool.value" />
 			<zoom
 				:zoom="canvasManager.currentZoom.value / 100"
@@ -22,6 +27,7 @@
 	import { fabric } from 'fabric-with-all'
 	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeUnmount } from 'vue'
 	import { OperationType } from './tools/layerHelper'
+	import { exportCanvasToImage } from './tools/exportMethod'
 	// 组件
 	import layerPanel from './components/layer-panel/index.vue'
 	import detailsPanel from './components/details-panel/index.vue'
@@ -36,11 +42,7 @@
 	import { ToolManager } from './manager/ToolManager'
 	import { KeyEventManager } from './manager/events/KeyEventManager'
 
-	// 准备就绪
-	const isReady = ref(false)
-	const canvasContainerRef = ref(null)
-	const canvasRef = ref(null)
-
+	const emit = defineEmits(['close'])
 	const props = defineProps({
 		config: {
 			type: Object,
@@ -48,6 +50,11 @@
 		}
 	})
 
+	// 准备就绪
+	const isReady = ref(false)
+	const canvasContainerRef = ref(null)
+	const canvasRef = ref(null)
+
 	// 状态管理器
 	const stateManager = new StateManager({})
 	provide('stateManager', stateManager)
@@ -136,10 +143,21 @@
 	provide('importLocalImage', importLocalImage)
 
 	const exportCanvas = () => {
+		// 导出图片
+		exportCanvasToImage(canvasManager.canvas).then((url) => {
+			const a = document.createElement('a')
+			a.href = url
+			a.download = 'canvas.png'
+			a.click()
+		})
+	}
+	// 导出到本地存储
+	const exportCanvasToLocalStorage = () => {
 		const json = canvasManager.getCanvasJSON()
 		localStorage.setItem('canvasJSON', json)
 	}
-	const importCanvas = () => {
+	// 从本地存储导入
+	const importCanvasFromLocalStorage = () => {
 		const json = localStorage.getItem('canvasJSON')
 		if (!json) return
 		canvasManager.loadJSON(json, (success) => {
@@ -151,6 +169,10 @@
 			stateManager.clearState(true)
 		})
 	}
+	// 导出画布并关闭
+	const exportCanvasAndClose = () => {
+		emit('close')
+	}
 </script>
 <style lang="less">
 	@import '@vue-flow/core/dist/style.css';