src/renderer/src/components/pdf/index copy.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="canvasitem">
+    <div class="pdfAdnFabric" id="pdfAdnFabric">
+      <canvas id="pdf-fabric"></canvas>
+      <canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
+    </div>
+  </div>
+</template>
+
+<script setup >
+import {
+  ref,
+  onMounted,
+  watch,
+  reactive,
+  defineProps,
+  defineExpose,
+  nextTick,
+  defineEmits
+} from 'vue'
+import { fabric } from 'fabric'
+import { ElMessage } from 'element-plus'
+import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
+
+const props = defineProps({
+  pdfObj: {
+    type: Object,
+    default: {
+      numberOfPdf: 2, //pdf数量 只有 1  2
+      pdfUrl: null,
+      numPages: 1
+    }
+  }
+})
+// canvas的所有数据
+const canvsStore = reactive({
+  id: 'xxxx',
+  pageArr: []
+})
+const fabriccanvas = ref(null)
+const fabriccanvas1 = ref(null)
+// 页面总数
+const numPagesTotal = ref(0)
+const imgarr = ref([])
+// 多个pdf的对象
+const canvasNumbsValue = ref([])
+const emit = defineEmits(['update:numPagesTotal'])
+const renderPage = async (canvasobj) => {
+  if (canvasobj.page > numPagesTotal.value) return
+  const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
+  // 渲染当前页
+  const page = await pdf.getPage(canvasobj.page)
+  var screenWidth = window.innerWidth/2-100;
+  var screenHeight = window.innerHeight;
+  const viewport = page.getViewport({ scale:2})
+ 
+  const canvasElement = canvasobj.canvas
+  canvasElement.width = viewport.width
+  canvasElement.height = viewport.height
+  const renderContext = {
+    canvasContext: canvasobj.context,
+    viewport: viewport
+  }
+  page.render(renderContext).promise.then((res) => {
+    const img = document.createElement('img')
+    img.src = canvasobj.canvas.toDataURL('image/png')
+    canvasobj.canvas.remove()
+    imgarr.value.push({ src: img.src, page: canvasobj.page, JSONdata: {}, index: canvasobj.index })
+    img.onload = () => {
+      // 在这里执行图像加载完成后的操作
+      // 根据传过来的pdf对象 判断改渲染哪一个fabric
+      if (props.pdfObj.numberOfPdf == 2) {
+        if (canvasobj.index == 0) {
+        
+          fabriccanvas.value.setWidth(screenWidth)
+          fabriccanvas.value.setHeight(screenHeight)
+          displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
+        } else {
+          fabriccanvas1.value.setWidth(screenWidth)
+          fabriccanvas1.value.setHeight(screenHeight)
+          displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
+        }
+      } else {
+        fabriccanvas.value.setWidth(screenWidth)
+        fabriccanvas.value.setHeight(screenHeight)
+        displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
+      }
+      // console.log(imgarr.value)
+      img.remove()
+    }
+      // 判断imgarr的JSONdata在canvsStore.pageArr有没有
+      canvsStore.pageArr.forEach((item) => {
+      if (item.page == canvasobj.page) {
+        imgarr.value.forEach((img) => {
+          if (img.page == canvasobj.page) {
+            img.JSONdata = item.JSONdata
+          }
+        })
+      }
+    })
+  })
+}
+const updatePage = (canvasobj) => {
+  renderPage(canvasobj)
+}
+const loadPdf = async (canvasobj) => {
+  updatePage(canvasobj)
+}
+
+const initPdf = async (type = 'default') => {
+  // 保存数据
+   savecanvsStore(imgarr, canvsStore)
+  // initcanvasdata(fabriccanvas)
+  // initcanvasdata(fabriccanvas1)
+  // 单页模式
+  if (type == 'restone') {
+    // 清除 canvas 上的所有对象
+    fabriccanvas1.value.clear()
+    // 释放 canvas 的资源
+    fabriccanvas1.value.dispose()
+  }
+  // 清除现有 canvas 元素的内容
+  canvasNumbsValue.value.forEach((canvasObj) => {
+    const context = canvasObj.context
+    context.clearRect(0, 0, canvasObj.canvas.width, canvasObj.canvas.height)
+  })
+  // 清除所有对象
+  imgarr.value = []
+  canvasNumbsValue.value = []
+  if (props.pdfObj.pdfUrl) {
+    await nextTick() // 确保 DOM 渲染完成
+    if (props.pdfObj.numberOfPdf == 1) {
+      canvasNumbsValue.value = [{}]
+      const canvasElement = document.createElement('canvas')
+      canvasNumbsValue.value[0].canvas = canvasElement
+      canvasNumbsValue.value[0].context = canvasNumbsValue.value[0].canvas.getContext('2d')
+      canvasNumbsValue.value[0].page = props.pdfObj.numPages
+      canvasNumbsValue.value[0].index = 0
+      await loadPdf(canvasNumbsValue.value[0])
+    } else {
+      for (var i = 0; i < props.pdfObj.numberOfPdf; i++) {
+        canvasNumbsValue.value[i] = {}
+        const canvasElement = document.createElement('canvas')
+        canvasNumbsValue.value[i].canvas = canvasElement
+        canvasNumbsValue.value[i].context = canvasNumbsValue.value[i].canvas.getContext('2d')
+        // 设置页数
+        if (i == 0) {
+          canvasNumbsValue.value[i].page = props.pdfObj.numPages
+        } else {
+          canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
+        }
+
+        canvasNumbsValue.value[i].index = i
+        // 加载FabricVue
+        await loadPdf(canvasNumbsValue.value[i])
+      }
+    }
+  }
+}
+const initPdfone = async () => {
+  setTimeout(() => {
+    fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
+    fabriccanvas1.value.isDrawingMode = true
+    fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
+    fabriccanvas1.value.freeDrawingCursor = 'default'
+    fabriccanvas1.value.setWidth(860)
+    handleevent(fabriccanvas1.value, imgarr, 'two')
+  }, 0) 
+  initPdf('addOnePage')
+}
+onMounted(async () => {
+  try {
+    const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
+    numPagesTotal.value = pdf.numPages
+    // console.log(pdf)
+    //   初始化fabriccanvas
+    fabriccanvas.value = new fabric.Canvas('pdf-fabric')
+    fabriccanvas.value.setWidth(860)
+    fabriccanvas.value.isDrawingMode = true
+    fabriccanvas.value.freeDrawingBrush.color = '#A33AFE'
+    fabriccanvas.value.freeDrawingCursor = 'default'
+
+    fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
+    fabriccanvas1.value.isDrawingMode = true
+    fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
+    fabriccanvas1.value.freeDrawingCursor = 'default'
+    fabriccanvas1.value.setWidth(860)
+    emit('update:numPagesTotal', pdf.numPages)
+    initPdf()
+  } catch (error) {
+    console.log(error)
+    ElMessage.error('pdf文件错误')
+  }
+  // 监听2个canvas事件
+  handleevent(fabriccanvas.value, imgarr)
+  handleevent(fabriccanvas1.value, imgarr, 'two')
+})
+defineExpose({
+  initPdf,
+  initPdfone
+})
+</script>
+
+<style lang="scss" scoped>
+.canvasitem {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+.pdfAdnFabric {
+  position: relative;
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  :deep(> div:nth-of-type(1)) {
+    margin-right: 10px;
+  }
+}
+</style>

src/renderer/src/components/pdf/index.vue

@@ -1,8 +1,17 @@
 <template>
   <div class="canvasitem">
-    <div class="pdfAdnFabric" id="pdfAdnFabric">
+    <div class="pdfAdnFabric" id="pdfAdnFabric"  @touchstart="handleTouchStart">
-      <canvas id="pdf-fabric"></canvas>
+      <!-- @touchmove="handleTouchMove"
-      <canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
+    @touchend="handleTouchEnd"
+    @mousedown="handleMouseDown"
+    @mousemove="handleMouseMove"
+    @mouseup="handleMouseUp" -->
+      <div >
+        <canvas ref="fabriccanvas" style="pointer-events: none;" />
+      </div>
+      <div v-if="props.pdfObj.numberOfPdf === 2" style="pointer-events: none;" >
+        <canvas ref="fabriccanvas1"  />
+      </div>
     </div>
   </div>
 </template>
@@ -18,9 +27,10 @@ import {
   nextTick,
   defineEmits
 } from 'vue'
-import { fabric } from 'fabric'
+// import { fabric } from 'fabric'
 import { ElMessage } from 'element-plus'
 import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
+import {fabricVue, TYPES} from '@/plugins/fabric'
 
 const props = defineProps({
   pdfObj: {
@@ -39,6 +49,9 @@ const canvsStore = reactive({
 })
 const fabriccanvas = ref(null)
 const fabriccanvas1 = ref(null)
+
+const canvasFabricVue = ref(null)
+const canvas1FabricVue = ref(null)
 // 页面总数
 const numPagesTotal = ref(0)
 const imgarr = ref([])
@@ -61,6 +74,8 @@ const renderPage = async (canvasobj) => {
     canvasContext: canvasobj.context,
     viewport: viewport
   }
+  console.log(renderContext,22222222222222222222)
+
   page.render(renderContext).promise.then((res) => {
     const img = document.createElement('img')
     img.src = canvasobj.canvas.toDataURL('image/png')
@@ -71,35 +86,35 @@ const renderPage = async (canvasobj) => {
       // 根据传过来的pdf对象 判断改渲染哪一个fabric
       if (props.pdfObj.numberOfPdf == 2) {
         if (canvasobj.index == 0) {
+          canvasFabricVue.value.canvas.setWidth(screenWidth)
+          canvasFabricVue.value.canvas.setHeight(screenHeight)
+          // updateCanvasBackgroundImage(canvasFabricVue,img)
+          displayData(canvasFabricVue, canvsStore, canvasobj, fabric, img)
+        } else {
+          canvas1FabricVue.value.canvas.setWidth(screenWidth)
+          canvas1FabricVue.value.canvas.setHeight(screenHeight)
+          displayData(canvas1FabricVue, canvsStore, canvasobj, fabric, img)
 
-          fabriccanvas.value.setWidth(screenWidth)
-          fabriccanvas.value.setHeight(screenHeight)
-          displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
-        } else {
-          fabriccanvas1.value.setWidth(screenWidth)
-          fabriccanvas1.value.setHeight(screenHeight)
-          displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
         }
       } else {
-        fabriccanvas.value.setWidth(screenWidth)
+        canvasFabricVue.value.canvas.setHeight(screenHeight)
-        fabriccanvas.value.setHeight(screenHeight)
+        displayData(canvasFabricVue, canvsStore, canvasobj, fabric, img)
-        displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
       }
-      // console.log(imgarr.value)
       img.remove()
     }
       // 判断imgarr的JSONdata在canvsStore.pageArr有没有
-      canvsStore.pageArr.forEach((item) => {
+    //   canvsStore.pageArr.forEach((item) => {
-      if (item.page == canvasobj.page) {
+    //   if (item.page == canvasobj.page) {
-        imgarr.value.forEach((img) => {
+    //     imgarr.value.forEach((img) => {
-          if (img.page == canvasobj.page) {
+    //       if (img.page == canvasobj.page) {
-            img.JSONdata = item.JSONdata
+    //         img.JSONdata = item.JSONdata
-          }
+    //       }
-        })
+    //     })
-      }
+    //   }
-    })
+    // })
   })
 }
+
 const updatePage = (canvasobj) => {
   renderPage(canvasobj)
 }
@@ -108,16 +123,24 @@ const loadPdf = async (canvasobj) => {
 }
 
 const initPdf = async (type = 'default') => {
+  if(imgarr.value?.length){
+    
+  }
+  imgarr.value.forEach(a=>{
+    if(a.index==0){
+      a.JSONdata=canvasFabricVue.value.canvas.toJSON()
+    }else{
+      a.JSONdata=canvas1FabricVue.value.canvas.toJSON()
+    }
+  })
   // 保存数据
    savecanvsStore(imgarr, canvsStore)
-  // initcanvasdata(fabriccanvas)
+ 
-  // initcanvasdata(fabriccanvas1)
+  if(props.pdfObj.numberOfPdf == 1){
-  // 单页模式
+    canvasFabricVue.value.history.clean()
-  if (type == 'restone') {
+  }else{
-    // 清除 canvas 上的所有对象
+    canvasFabricVue.value.history.clean()
-    fabriccanvas1.value.clear()
+    canvas1FabricVue.value.history.clean()
-    // 释放 canvas 的资源
-    fabriccanvas1.value.dispose()
   }
   // 清除现有 canvas 元素的内容
   canvasNumbsValue.value.forEach((canvasObj) => {
@@ -149,7 +172,6 @@ const initPdf = async (type = 'default') => {
         } else {
           canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
         }
-
         canvasNumbsValue.value[i].index = i
         // 加载FabricVue
         await loadPdf(canvasNumbsValue.value[i])
@@ -158,43 +180,77 @@ const initPdf = async (type = 'default') => {
   }
 }
 const initPdfone = async () => {
-  setTimeout(() => {
+  setTimeout( async() => {
-    fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
+    const option = { freeDrawingCursor: 'default' }
-    fabriccanvas1.value.isDrawingMode = true
+    const canvas2 = new fabricVue()
-    fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
+    await canvas2.initCanvas(fabriccanvas1.value, option)
-    fabriccanvas1.value.freeDrawingCursor = 'default'
+    canvas2.canvas.setWidth(window.innerWidth/2-100)
-    fabriccanvas1.value.setWidth(595)
+    canvas1FabricVue.value=canvas2
-    handleevent(fabriccanvas1.value, imgarr, 'two')
+    await initPdf('addOnePage')
   }, 0) 
-  initPdf('addOnePage')
+  
 }
 onMounted(async () => {
   try {
     const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
     numPagesTotal.value = pdf.numPages
-    // console.log(pdf)
     //   初始化fabriccanvas
-    fabriccanvas.value = new fabric.Canvas('pdf-fabric')
+    const option = { freeDrawingCursor: 'default'}
-    fabriccanvas.value.setWidth(595)
+    const canvas1 = new fabricVue()
-    fabriccanvas.value.isDrawingMode = true
+    await canvas1.initCanvas(fabriccanvas.value, option)
-    fabriccanvas.value.freeDrawingBrush.color = '#A33AFE'
+    canvas1.canvas.setWidth(window.innerWidth/2-100)
-    fabriccanvas.value.freeDrawingCursor = 'default'
+    // canvas1.canvas.isDrawingMode=false
-
+    canvas1.canvas.selectable = false;
-    fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
+    canvas1.canvas.evented = false;
-    fabriccanvas1.value.isDrawingMode = true
+    canvasFabricVue.value=canvas1
-    fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
+    const canvas2 = new fabricVue()
-    fabriccanvas1.value.freeDrawingCursor = 'default'
+    await canvas2.initCanvas(fabriccanvas1.value, option)
-    fabriccanvas1.value.setWidth(595)
+    canvas2.canvas.setWidth(window.innerWidth/2-100)
+    canvas2.canvas.isDrawingMode=false
+    canvas1FabricVue.value=canvas2
+    window.test={canvas1,canvas2}
     emit('update:numPagesTotal', pdf.numPages)
+
     initPdf()
-  } catch (error) {
+  }catch (error) {
     console.log(error)
     ElMessage.error('pdf文件错误')
   }
   // 监听2个canvas事件
-  handleevent(fabriccanvas.value, imgarr)
+  // handleevent(fabriccanvas.value, imgarr)
-  handleevent(fabriccanvas1.value, imgarr, 'two')
+  // handleevent(fabriccanvas1.value, imgarr, 'two')
+  
 })
+const handleTouchStart = (e) => {
+  console.log(e)
+
+};
+
+const handleTouchMove = (e) => {
+  console.log(e)
+};
+
+const handleTouchEnd = (e) => {
+  console.log(e)
+  
+};
+
+const handleMouseDown = (e) => {
+  // console.log(e)
+};
+
+const handleMouseMove = (e) => {
+  // console.log(e)
+
+ 
+};
+
+const handleMouseUp = (e) => {
+  // console.log(e)
+
+
+};
+
 defineExpose({
   initPdf,
   initPdfone

src/renderer/src/utils/pdfAndFabric copy.js

@@ -0,0 +1,133 @@
+// 所有事件
+export function handleevent(canvas, imgarr, type = 'defalut') {
+  // // 鼠标按下
+  // canvas.on('mouse:down', function (e) {})
+  // // // 监听鼠标移动事件
+  // //     canvas.on('mouse:move', (options) => {
+  // //         console.log('Mouse move event:', options);
+  // //     });
+
+  // // 监听鼠标释放事件
+  // canvas.on('mouse:up', (options) => {
+  //   //判断是点击的哪一个
+  //   if (type == 'defalut') {
+  //     if (imgarr.value[0].index == 0) {
+  //       imgarr.value[0].JSONdata = canvas.toJSON()
+  //     }
+  //     if (imgarr.value[1]?.index == 0) {
+  //       imgarr.value[1].JSONdata = canvas.toJSON()
+  //     }
+  //   } else {
+  //     if (imgarr.value[0].index == 1) {
+  //       imgarr.value[0].JSONdata = canvas.toJSON()
+  //     }
+  //     if (imgarr.value[1]?.index == 1) {
+  //       imgarr.value[1].JSONdata = canvas.toJSON()
+  //     }
+  //   }
+  //   console.log(imgarr.value)
+
+  // })
+}
+//   保存数据
+export function savecanvsStore(imgarr, canvsStore) {
+  // canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
+}
+//   重显数据
+export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
+  // // 初始化
+  // if (!canvsStore.pageArr.length) {
+  //   fabric.Image.fromURL(img.src, (img) => {
+  //     img.set({
+  //       left: 0,
+  //       top: 0,
+  //       scaleX: canvas.value.width / img.width,
+  //       scaleY: canvas.value.height / img.height
+  //     })
+  //     canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
+  //   })
+  //   return
+  // }
+  // canvsStore.pageArr.forEach((item) => {
+  //   //初始化
+  //   if (item.page == canvasobj.page) {
+  //       // canvas.value.clear() // 清除 Canvas
+  //   //   console.log(item.JSONdata, '找到一样的数据')
+  //     canvas.value.loadFromJSON(item.JSONdata, () => {
+  //       // 在所有对象加载完成后重新渲染画布
+  //       canvas.value.renderAll.bind(canvas.value)
+  //       canvas.value.renderAll()
+  //       // requestAnimationFrame(() => {
+  //       //   // 渲染所有对象
+       
+  //       // })
+  //     })
+  //   } else {
+  //     // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
+  //     //  // 清除 Canvas
+  //     canvas.value.clear()
+  //     requestAnimationFrame(function () {
+  //       fabric.Image.fromURL(img.src, (img) => {
+  //         img.set({
+  //           left: 0,
+  //           top: 0,
+  //           scaleX: canvas.value.width / img.width,
+  //           scaleY: canvas.value.height / img.height
+  //         })
+  //         canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
+  //       })
+  //       // 渲染所有对象
+  //       canvas.value.renderAll.bind(canvas.value)
+  //       canvas.value.renderAll()
+  //     })
+  //   }
+  // })
+}
+
+//page 一样替换
+const mergeAndReplace = (arr1, arr2) => {
+  // // 用于存储替换后的数组
+  // const resultArray = array1.map(item1 => {
+  //   // 在 array2 中查找 page 相同的对象
+  //   const replacement = array2.find(item2 => item2.page == item1.page);
+  //   // 如果找到替换对象，则返回替换对象，否则返回原对象
+  //   return replacement ? replacement : item1;
+  // });
+
+  // // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
+  // array2.forEach(item2 => {
+  //   const existsInArray1 = array1.some(item1 => item1.page == item2.page);
+  //   if (!existsInArray1) {
+  //     resultArray.push(item2);
+  //   }
+  // });
+
+  // return resultArray;
+
+  // 创建一个映射，将 arr2 中的对象按 page 属性存储
+  let map = new Map(arr2.map((item) => [item.page, item]))
+
+  // 使用 map 替换 arr1 中相应 page 的对象，并添加 arr2 中的对象
+  arr1 = arr1.map((item) => (map.has(item.page) ? map.get(item.page) : item))
+
+  // 将 map 中存在但 arr1 中不存在的对象添加到 arr1
+  for (let [page, obj] of map) {
+    if (!arr1.some((item) => item.page === page)) {
+      arr1.push(obj)
+    }
+  }
+  return arr1
+}
+
+//   初始化数据
+export function initcanvasdata(canvas) {
+  canvas.value.clear() // 清除 Canvas
+  // 设置画布的背景色或其他属性
+  canvas.value.backgroundColor = 'rgba(255, 255, 255, 1)' // 白色背景
+
+  // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
+  requestAnimationFrame(function () {
+    // 渲染所有对象
+    canvas.value.renderAll.bind(canvas.value)
+  })
+}

src/renderer/src/utils/pdfAndFabric.js

@@ -1,84 +1,96 @@
 // 所有事件
 export function handleevent(canvas, imgarr, type = 'defalut') {
-  // 鼠标按下
+  // // 鼠标按下
-  canvas.on('mouse:down', function (e) {})
+  // canvas.on('mouse:down', function (e) {})
-  // // 监听鼠标移动事件
+  // // // 监听鼠标移动事件
-  //     canvas.on('mouse:move', (options) => {
+  // //     canvas.on('mouse:move', (options) => {
-  //         console.log('Mouse move event:', options);
+  // //         console.log('Mouse move event:', options);
-  //     });
+  // //     });
 
-  // 监听鼠标释放事件
+  // // 监听鼠标释放事件
-  canvas.on('mouse:up', (options) => {
+  // canvas.on('mouse:up', (options) => {
-    //判断是点击的哪一个
+  //   //判断是点击的哪一个
-    if (type == 'defalut') {
+  //   if (type == 'defalut') {
-      if (imgarr.value[0].index == 0) {
+  //     if (imgarr.value[0].index == 0) {
-        imgarr.value[0].JSONdata = canvas.toJSON()
+  //       imgarr.value[0].JSONdata = canvas.toJSON()
-      }
+  //     }
-      if (imgarr.value[1]?.index == 0) {
+  //     if (imgarr.value[1]?.index == 0) {
-        imgarr.value[1].JSONdata = canvas.toJSON()
+  //       imgarr.value[1].JSONdata = canvas.toJSON()
-      }
+  //     }
-    } else {
+  //   } else {
-      if (imgarr.value[0].index == 1) {
+  //     if (imgarr.value[0].index == 1) {
-        imgarr.value[0].JSONdata = canvas.toJSON()
+  //       imgarr.value[0].JSONdata = canvas.toJSON()
-      }
+  //     }
-      if (imgarr.value[1]?.index == 1) {
+  //     if (imgarr.value[1]?.index == 1) {
-        imgarr.value[1].JSONdata = canvas.toJSON()
+  //       imgarr.value[1].JSONdata = canvas.toJSON()
-      }
+  //     }
-    }
+  //   }
-    console.log(imgarr.value)
+  //   console.log(imgarr.value)
 
-  })
+  // })
 }
 //   保存数据
 export function savecanvsStore(imgarr, canvsStore) {
   canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
 }
 //   重显数据
-export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
+export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
   // 初始化
+  const canvas = FabricVue.value.canvas
+  if (!canvas) {
+    return
+  }
+  
   if (!canvsStore.pageArr.length) {
-    fabric.Image.fromURL(img.src, (img) => {
+    fabric.Image.fromURL(
-      img.set({
+      img.src,
+      (image) => {
+            image.set({
                 left: 0,
                 top: 0,
-        scaleX: canvas.value.width / img.width,
+                scaleX: canvas.width / img.width,
-        scaleY: canvas.value.height / img.height
+                scaleY: canvas.height / img.height
               })
-      canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
+        //  FabricVue.setBackgroundImage(image, FabricVue.renderAll.bind(FabricVue))
+        // setBackgroundImage(image,FabricVue)
+        canvas.setBackgroundImage(image, () => {
+          FabricVue.value.render()
         })
+      },
+      {crossOrigin: 'anonymous'}
+    )
     return
   }
   canvsStore.pageArr.forEach((item) => {
     //初始化
     if (item.page == canvasobj.page) {
-        // canvas.value.clear() // 清除 Canvas
+      canvas.loadFromJSON(item.JSONdata, () => {
-    //   console.log(item.JSONdata, '找到一样的数据')
-      canvas.value.loadFromJSON(item.JSONdata, () => {
         // 在所有对象加载完成后重新渲染画布
-        canvas.value.renderAll.bind(canvas.value)
+        // Utils.handleCanvasJSONLoaded(canvas)
-        canvas.value.renderAll()
+        canvas.requestRenderAll() // 批量重绘
-        // requestAnimationFrame(() => {
-        //   // 渲染所有对象
-       
-        // })
       })
     } else {
       // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
       //  // 清除 Canvas
-      canvas.value.clear()
+      // canvas.clear()
       requestAnimationFrame(function () {
-        fabric.Image.fromURL(img.src, (img) => {
+        fabric.Image.fromURL(
-          img.set({
+          img.src,
+          (image) => {
+                image.set({
                     left: 0,
                     top: 0,
-            scaleX: canvas.value.width / img.width,
+                    scaleX: canvas.width / img.width,
-            scaleY: canvas.value.height / img.height
+                    scaleY: canvas.height / img.height
                   })
-          canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
+            canvas.setBackgroundImage(image, () => {
+              FabricVue.value.render()
             })
+          },
+          {crossOrigin: 'anonymous'}
+        )
         // 渲染所有对象
-        canvas.value.renderAll.bind(canvas.value)
+        canvas.requestRenderAll() // 批量重绘
-        canvas.value.renderAll()
       })
     }
   })
@@ -86,23 +98,7 @@ export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
 
 //page 一样替换
 const mergeAndReplace = (arr1, arr2) => {
-  // // 用于存储替换后的数组
-  // const resultArray = array1.map(item1 => {
-  //   // 在 array2 中查找 page 相同的对象
-  //   const replacement = array2.find(item2 => item2.page == item1.page);
-  //   // 如果找到替换对象，则返回替换对象，否则返回原对象
-  //   return replacement ? replacement : item1;
-  // });
 
-  // // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
-  // array2.forEach(item2 => {
-  //   const existsInArray1 = array1.some(item1 => item1.page == item2.page);
-  //   if (!existsInArray1) {
-  //     resultArray.push(item2);
-  //   }
-  // });
-
-  // return resultArray;
 
   // 创建一个映射，将 arr2 中的对象按 page 属性存储
   let map = new Map(arr2.map((item) => [item.page, item]))