提交图片导出测试功能

src/hooks/useExport.ts

@@ -38,31 +38,36 @@ export default () => {
     const toImage = format === 'png' ? toPng : toJpeg
     const foreignObjectSpans = domRef.querySelectorAll('foreignObject [xmlns]')
     foreignObjectSpans.forEach(spanRef => spanRef.removeAttribute('xmlns'))
-    setTimeout(() => {
-      const config: ExportImageConfig = {
-        quality,
-        width: 1600,
-      }
 
-      if (ignoreWebfont) config.fontEmbedCSS = ''
-      toImage(domRef, config).then(dataUrl => {
-        const obj = {
-          index: i,
-          url: dataUrl
+    return new Promise<boolean>((resolve)=>{
+      setTimeout(() => {
+        const config: ExportImageConfig = {
+          quality,
+          width: 1600,
         }
-        FeatureImg.value.push(obj)
-        FeatureImgStore.setFeatureImg(JSON.parse(JSON.stringify(FeatureImg.value)))
   
-      }).catch(() => {
-        // message.error('导出图片失败')
-      })
-    }, 200)
+        if (ignoreWebfont) config.fontEmbedCSS = ''
+        toImage(domRef, config).then(dataUrl => {
+          const obj = {
+            index: i,
+            url: dataUrl
+          }
+          FeatureImg.value.push(obj)
+          FeatureImgStore.setFeatureImg(JSON.parse(JSON.stringify(FeatureImg.value)))
+          resolve(true)
+        }).catch(() => {
+          // message.error('导出图片失败')
+          resolve(false)
+        })
+      }, 200)
+    });
     
   }
 
   
   // 导出图片
   const exportImage = (domRef: HTMLElement, format: string, quality: number, ignoreWebfont = true) => {
+    
     exporting.value = true
     const toImage = format === 'png' ? toPng : toJpeg
     const foreignObjectSpans = domRef.querySelectorAll('foreignObject [xmlns]')

src/views/Editor/Canvas/index.vue

 <template>
+  <div @click="testHandler">测试</div>
+  <img :src="x.url" v-for="(x,i) in FeatureImg" alt="">
   <div 
     class="canvas" 
     ref="canvasRef"
@@ -8,6 +10,7 @@
     v-contextmenu="contextmenus"
     v-click-outside="removeEditorAreaFocus"
   >
+   
     <ElementCreateSelection
       v-if="creatingElement"
       @created="data => insertElementFromCreateSelection(data)"
@@ -94,7 +97,7 @@
       <LinkDialog @close="linkDialogVisible = false" />
     </Modal>
   </div>
-  <div style="position: relative;z-index: -1;" v-if="!model&&ConfigId&&slides.length>0">
+  <div style="position: relative;z-index: -1;" v-if="slides.length>0"><!-- !model&&ConfigId&& -->
     <div class="export-img-dialog">
       <div class="thumbnails-view">
         <div class="thumbnails" v-for="slide in slides" ref="FeatureImgRef">
@@ -192,15 +195,33 @@ const FeatureImgRef = ref(null)
 
 // 将界面生成形成图
 watch(() => slides.value, (n,o) =>{
+  // FeatureImgStore.setFeatureImg([])
+  // if(FeatureImgRef.value&&FeatureImgRef.value.length>0){
+  //   console.log(FeatureImgRef.value)
+  //   exportFeatureImg(FeatureImgRef.value[0], 'jpeg', 1, false, 0)
+  //   console.log(FeatureImg.value)
+  //   // setTimeout(()=>{
+  //   //   for(let i=0;i<FeatureImgRef.value.length;i++){
+  //   //    
+  //   //   }
+  //   // },500)
+  // }
+})
+const testHandler = async ()=>{
   FeatureImgStore.setFeatureImg([])
   if(FeatureImgRef.value&&FeatureImgRef.value.length>0){
-    setTimeout(()=>{
-      for(let i=0;i<FeatureImgRef.value.length;i++){
-        exportFeatureImg(FeatureImgRef.value[i], 'jpeg', 1, true,i+1)
+    console.log(FeatureImgRef.value)
+    for (let i = 0; i < FeatureImgRef.value.length; i++) {
+      let result = await exportFeatureImg(FeatureImgRef.value[i], 'jpeg', 1, false, i)
+      if(!result){
+        console.log('异常')
+        break
       }
-    },500)
+    }
+    console.log(FeatureImg.value)
   }
-})
+}
+
 // 监听请求保存成功 重新请求数据
 watch(() => FeatureImgRef.value, (n,o) =>{
   

src/views/Editor/ExportDialog/ExportImage.vue

@@ -118,6 +118,7 @@ const expImage = () => {
   if (!imageThumbnailsRef.value) return
   exportImage(imageThumbnailsRef.value, format.value, quality.value, ignoreWebfont.value)
 }
+console.log('页面进入')
 </script>
 
 <style lang="scss" scoped>