diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue index 60e2e52..e4578cd 100644 --- a/src/components/Canvas/DepthCanvas/depth-canvas.vue +++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue @@ -63,8 +63,8 @@ provide('stateManager', stateManager) // 画布管理器 - const canvasManager = new CanvasManager({ stateManager }) - stateManager.setManager({ canvasManager, canvasRef }) + const canvasManager = new CanvasManager({ stateManager, props }) + stateManager.setManager({ canvasManager }) provide('canvasManager', canvasManager) // 图层管理器 diff --git a/src/components/Canvas/DepthCanvas/index.vue b/src/components/Canvas/DepthCanvas/index.vue index 210a7a4..002b998 100644 --- a/src/components/Canvas/DepthCanvas/index.vue +++ b/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 diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts index 5541422..2f8eb50 100644 --- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts +++ b/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) => { - const key = `xxxxxxxx_${i++}_xxxxxxxx`; - images[key] = url - return key + const create = (url, key) => { + const key_ = `xxxxx_${this.uniqueId}_${md5(key)}_xxxxx`; + images[key_] = url + 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 }