深度画布保存接口

src/api/depth-canvas.ts

@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+/**
+ * 获取深度画布
+ * @param id depth id
+ * @returns 深度画布数据
+ */
+export const getDepthCanvas = (id: string) => {
+	return request({
+		url: `/api/deep-canvas/${id}`,
+		method: 'get',
+		loading: true,
+	})
+}
+
+/**
+ * 保存深度画布
+ * @param data 保存depth的画布数据
+ * @returns 保存结果
+ */
+export const saveDepthCanvas = (data: object) => {
+	return request({
+		url: `/api/deep-canvas/update`,
+		method: 'put',
+		data,
+		loading: true,
+	})
+}
+
+/**
+ * 删除深度画布
+ * @param id depth id
+ * @returns 删除结果
+ */
+export const deleteDepthCanvas = (id: string) => {
+	return request({
+		url: `/api/deep-canvas/${id}`,
+		method: 'delete',
+		loading: true,
+	})
+}

src/components/Canvas/DepthCanvas/components/depth-header-tools.vue

@@ -178,8 +178,8 @@
 	}
 	const onWorkbench = async () => {
 		exportCanvasToImage(canvasManager.canvas).then((url) => {
-			const json = canvasManager.getCanvasJSON()
+			const { canvas, images } = canvasManager.getCanvasDisUrlJSON()
-			emit('workbench', { url, json })
+			emit('workbench', { url, canvas, images })
 		})
 	}
 </script>

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

@@ -89,16 +89,19 @@
 		globalStore.setLoading(true)
 		keyEventManager.registerEvents()
 		const url = props.config.url || ''
-		const json = props.config.json || ''
+		const canvasData = props.config.canvasData || ''
 		await canvasManager.initCanvas({
 			canvasRef,
 			canvasViewWidth: canvasContainerRef.value.clientWidth,
 			canvasViewHeight: canvasContainerRef.value.clientHeight,
 			canvasWidth: props.config.width || 750,
 			canvasHeight: props.config.height || 600,
-			url: json ? '' : url
+			url: canvasData ? '' : url
 		})
-		if (json) await canvasManager.loadJSON(json)
+		if (canvasData) {
+			const json = canvasManager.processCanvasDisUrlJSON(canvasData)
+			await canvasManager.loadJSON(json)
+		}
 		globalStore.setLoading(false)
 
 		stateManager.onMounted()

src/components/Canvas/DepthCanvas/index.vue

@@ -9,33 +9,54 @@
 <script setup lang="ts">
 	import { base64Tofile } from '../tools/tools'
 	import { uploadImage } from '@/api/upload'
+	import { getDepthCanvas, saveDepthCanvas } from '@/api/depth-canvas'
 	import FullscreenDialog from '../components/fullscreen-dialog.vue'
 	import depthCanvas from './depth-canvas.vue'
 	import { ref } from 'vue'
 	const dialogVisible = ref(false)
 	const config = ref({
-		id: '',
+		canvasId: '',
+		sketchId: '',
 		url: '',
-		json: ''
+		canvasData: '' as any,
+		onWorkbench(options) {},
+		onClose() {}
 	})
 
-	const open = (options) => {
+	const open = async (options) => {
 		config.value = options
-		console.log(config.value)
+		if (config.value.canvasId) {
-		config.value.json = sessionStorage.getItem('canvasJson_' + config.value.id)
+			const res = await getDepthCanvas(config.value.canvasId)
+			const canvas = res.deepCanvasDetail
+			const images = res.images
+			if (canvas && images) {
+				config.value.canvasData = { canvas: JSON.stringify(canvas), images }
+			} else {
+				config.value.canvasData = null
+			}
+		}
+
 		dialogVisible.value = true
 	}
 	// 工作区
 	const onWorkbench = async (options) => {
-		const json = options.json
+		// 保存画布数据
-
+		const data = {
-		sessionStorage.setItem('canvasJson_' + config.value.id, json)
+			deepCanvasDetail: JSON.parse(options.canvas),
-
+			images: options.images,
+			sketchId: config.value.sketchId,
+			id: config.value.canvasId || null
+		}
+		const sData = await saveDepthCanvas(data)
+		console.log(sData)
+		const canvasId = sData.id
+		// base64 转 file 上传转换为 url
 		const file = base64Tofile(options.url, 'canvas.png')
 		const formData = new FormData()
 		formData.append('file', file)
 		const url = await uploadImage(formData)
-		config.value.onWorkbench?.({ url })
+		config.value.onWorkbench?.({ url, canvasId })
+
 		dialogVisible.value = false
 	}
 	// 关闭

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -293,12 +293,12 @@ export class CanvasManager {
 	/** 导出画布为处理图片的JSON */
 	getCanvasDisUrlJSON() {
 		const canvas = this.canvas.toJSON()
-		const images = [];
+		const images = {};
 		var i = 0;
 		const create = (url) => {
-			const logo = `xxxxxxxx_${i++}_xxxxxxxx`;
+			const key = `xxxxxxxx_${i++}_xxxxxxxx`;
-			images.push({ index: logo, url })
+			images[key] = url
-			return logo
+			return key
 		}
 		canvas.objects.forEach((object: any) => {
 			if (object.thumbnail) {
@@ -317,11 +317,13 @@ export class CanvasManager {
 		return { canvas: JSON.stringify(canvas), images }
 	}
 	/** 处理JSON为正常画布 */
-	processCanvasDisUrlJSON(obj: { canvas: string, images: Object[] }) {
+	processCanvasDisUrlJSON(obj: { canvas: string, images: Object }) {
 		var json = obj.canvas;
-		const images = obj.images || []
+		const images = obj.images || {}
-		images.forEach((v: any) => json = json.replace(new RegExp(v.index), v.url))
+		for (const key in images) {
-		return JSON.parse(json)
+			json = json.replace(new RegExp(key), images[key])
+		}
+		return json
 	}
 	dispose() {
 		this.animationManager?.dispose()