修复行程内容初始化渲染时，图片尺寸问题

src/services/FileService.ts

+
+class FileService{
+    static getImageSizeWithoutDownloading = async (url: string): Promise<{ width: number; height: number }> => {
+        const response = await fetch(url, { method: 'HEAD' }); // Use HEAD request to get metadata
+        const contentLength = response.headers.get('Content-Length');
+      
+        if (!contentLength) {
+          throw new Error('Unable to determine Content-Length');
+        }
+      
+        const rangeEnd = Math.min(parseInt(contentLength, 10), 1024); // Read the first 1KB of data
+        const partialResponse = await fetch(url, {
+          headers: {
+            Range: `bytes=0-${rangeEnd}`,
+          },
+        });
+      
+        const blob = await partialResponse.blob();
+        const objectURL = URL.createObjectURL(blob);
+        const image = new Image();
+      
+        return new Promise((resolve, reject) => {
+          image.onload = () => {
+            resolve({ width: image.width, height: image.height });
+            URL.revokeObjectURL(objectURL);
+          };
+      
+          image.onerror = reject;
+      
+          image.src = objectURL;
+        });
+    }
+}
+
+export default FileService
\ No newline at end of file

src/views/Editor/Thumbnails/index.vue

@@ -64,6 +64,9 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import LayoutPool from './LayoutPool.vue'
 import Popover from '@/components/Popover.vue'
 import Draggable from 'vuedraggable'
+import { ElLoading } from 'element-plus'
+import FileService from '@/services/FileService'
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
@@ -166,7 +169,15 @@ queryObj.value = inject(injectKeyDataSource).queryObj
 
 // 获取行程团数据初始化数据
 const GetTripFiledData = async () =>{
-  console.log('初始化行程','----------')
+  const loadingObj = ElLoading.service({
+    text:'正在渲染团队数据',
+    lock:true
+  })
+  let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE, viewportRatio = slidesStore.viewportRatio
+  if(viewportRatio<1){
+    maxWidth = VIEWPORT_VER_SIZE
+    maxHeight = VIEWPORT_SIZE
+  }
   const slidesData = slides.value
   try {
       let queryMsg = {
@@ -177,12 +188,15 @@ const GetTripFiledData = async () =>{
         if(!dataRes.data.data) return
         const travel = dataRes.data.data
         const cursors = [] as Array<any>
-        slidesData.forEach((x,index)=>{
-          x.elements.forEach(y=>{
-              if(y.TemplateDataSource && y.TemplateDataSource.Content){
+        for (let index = 0; index < slidesData.length; index++) {
+          const x = slidesData[index] as any;
+          for (let j = 0; j < x.elements.length; j++) {
+            const y = x.elements[j];
+            if(y.TemplateDataSource && y.TemplateDataSource.Content){
                 let dataPath = y.TemplateDataSource.Content.split('.')
                 let value=JSON.parse(JSON.stringify(travel));
-                dataPath.forEach((oo,i)=>{
+                for (let i = 0; i < dataPath.length; i++) {
+                  const oo = dataPath[i];
                   if(value && value[oo]){
                     if(i==0 && Array.isArray(value[oo])){
                       let temp = cursors.find(item=>item.key==oo)
@@ -193,7 +207,6 @@ const GetTripFiledData = async () =>{
                         cursors.push(temp)
                       }
                       if(y.TemplateDataSource.index!=null&&y.TemplateDataSource.index>=0){
-                        console.log(value[oo],'-------')
                         if(value[oo].length>temp.index) value=value[oo][y.TemplateDataSource.index]
                       }else{
                         if(value[oo].length>temp.index) value=value[oo][temp.index]
@@ -205,24 +218,43 @@ const GetTripFiledData = async () =>{
                   }else{
                     value = null
                   }
-                })
+                }
                 if(value && typeof(value) == 'string'){
                   //替换
                   y.content= y.content.replace(getHtmlPlainText(y.content),value)
                 }else if(value && Array.isArray(value)){
                   //替换
                   if(y.type=='image'){
+                    console.log('下载图片开始',new Date().getSeconds())
+                    try {
+                      let tempSize = await FileService.getImageSizeWithoutDownloading(value[0])
+                      if(tempSize.width>maxWidth){
+                        let ratio = maxWidth/tempSize.width
+                        tempSize.width = maxWidth
+                        tempSize.height = tempSize.height*ratio
+                      }
+                      if(tempSize.height>maxHeight){
+                        let ratio = maxHeight/tempSize.height
+                        tempSize.height = maxHeight
+                        tempSize.width = tempSize.width*ratio
+                      }
+                      if(y.left<0)y.left=0
+                      if(y.top<0)y.top=0
+                      y.width = tempSize.width
+                      y.height = tempSize.height
+                    } catch (error) { }
                     y.src = value[0]
                   } 
                 }
               }
-            })
-        })
+          }
+        }
         slidesStore.setSlides(slidesData)
       }
   } catch (error) {
       console.log("triptemplateGetTripFiledData", error);
   }
+  loadingObj.close()
 }
 
 // 获取行程模版数据