111

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

@@ -63,8 +63,8 @@
 	provide('stateManager', stateManager)
 
 	// 画布管理器
-	const canvasManager = new CanvasManager({ stateManager })
+	const canvasManager = new CanvasManager({ stateManager, props })
-	stateManager.setManager({ canvasManager, canvasRef })
+	stateManager.setManager({ canvasManager })
 	provide('canvasManager', canvasManager)
 
 	// 图层管理器

src/components/Canvas/DepthCanvas/index.vue

@@ -48,13 +48,13 @@
 			id: config.value.canvasId || null
 		}
 		const sData = await saveDepthCanvas(data)
-		
+
 		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)
+		const url = await uploadImage(formData, true)
 		config.value.onWorkbench?.({ url, canvasId })
 
 		dialogVisible.value = false

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

@@ -6,6 +6,7 @@ import { detectDeviceType } from '../tools/index'
 import { CanvasEventManager } from "./events/CanvasEventManager";
 import { OperationType } from '../tools/layerHelper'
 import { createId } from '../../tools/tools'
+import md5 from 'md5'
 
 // 自定义画布转对象属性
 fabric.Object.prototype.customProperties = ["top", "left", "width", "height", "scaleX", "scaleY", "info", "thumbnail"];
@@ -45,8 +46,10 @@ export class CanvasManager {
 	deviceInfo: any
 	canvas: any
 	currentZoom: any
+	uniqueId: string
 	constructor(options) {
 		this.stateManager = options.stateManager;
+		this.uniqueId = md5(options.props.config.url || Date.now());
 		this.deviceInfo = detectDeviceType();
 		this.currentZoom = ref(100)
 	}
@@ -279,6 +282,7 @@ export class CanvasManager {
 				console.error('JSON解析错误:', error)
 			}
 			if (!jsonObj) return resolve(false)
+			if (jsonObj.uniqueId) this.uniqueId = jsonObj.uniqueId
 			this.canvas.loadFromJSON(jsonObj, () => {
 				if (rerecord) this.stateManager.clearState()
 				this.resetZoom(false)
@@ -294,25 +298,26 @@ export class CanvasManager {
 	getCanvasDisUrlJSON() {
 		const canvas = this.canvas.toJSON()
 		const images = {};
-		var i = 0;
+		const create = (url, key) => {
-		const create = (url) => {
+			const key_ = `xxxxx_${this.uniqueId}_${md5(key)}_xxxxx`;
-			const key = `xxxxxxxx_${i++}_xxxxxxxx`;
+			images[key_] = url
-			images[key] = url
+			return key_
-			return key
 		}
+		canvas.uniqueId = this.uniqueId
 		canvas.objects.forEach((object: any) => {
+			const id = object.info?.id
 			if (object.thumbnail) {
-				object.thumbnail = create(object.thumbnail)
+				object.thumbnail = create(object.thumbnail, `thumbnail_${id}`)
 			}
 			if (object.src) {
-				object.src = create(object.src)
+				object.src = create(object.src, `src_${id}`)
 				object.crossOrigin = 'anonymous'
 			}
 			if (object.fill?.source) {
-				object.fill.source = create(object.fill.source)
+				object.fill.source = create(object.fill.source, `fillsource_${id}`)
 			}
 			if (object.info?.fill?.source) {
-				object.info.fill.source = create(object.info.fill.source)
+				object.info.fill.source = create(object.info.fill.source, `infofillsource_${id}`)
 			}
 		})
 		return { canvas: JSON.stringify(canvas), images }