日报分享

src/components/share.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="share">
-    <div class="share-content" ref="shareContent" v-show="false">
+    <div class="share-content" ref="shareContent">
       <div class="header">
         <div class="left-icon">
           <img :src="require('@/assets/shareLeft.png')" />
@@ -27,7 +27,9 @@
         <div class="content-photos">
           <template v-for="item in reportTarget.photos">
             <template v-for="item1 in item.photos">
-              <img :src="item1.fileUrl" alt="" />
+              <img :src="item1.fileUrl" alt="" crossorigin="anonymous"
+                style="display: block; width: 188px; height: 188px; object-fit: cover" @load="handleImageLoad"
+                @error="handleImageError" />
             </template>
           </template>
         </div>
@@ -53,7 +55,7 @@
   </div>
 </template>
 <script>
-import html2canvas from html2canvas
+import html2canvas from 'html2canvas'
 export default {
   name: 'share',
   props: {
@@ -72,13 +74,33 @@ export default {
   },
   mounted() {
     this.processFlag = process.env.NODE_ENV;
-    console.log(this.reportTarget);
     this.$nextTick(() => {
-      // 调用html转化canvas函数
-      this.htmlToCanvas();
+      setTimeout(async () => {
+        try {
+          await this.htmlToCanvas();
+        } catch (error) {
+          console.error('初始化生成分享图失败:', error);
+        }
+      }, 3000);
     });
   },
+  data() {
+    return {
+      processFlag: '',
+      canvasImageUrl: "",
+      loadedImages: new Set(),
+      errorImages: new Set(),
+      retryCount: 0,
+    };
+  },
   methods: {
+    handleImageLoad(e) {
+      this.loadedImages.add(e.target.src);
+    },
+    handleImageError(e) {
+      console.error('Image load failed:', e.target.src);
+      this.errorImages.add(e.target.src);
+    },
     filterText(index) {
       if (index == 0) {
         return '明日工作计划';
@@ -86,16 +108,41 @@ export default {
         return '今日机会与挑战总结';
       }
     },
-    splitTime(date) {
-      let time = date.split(' ');
-      return time[0].replice('-', '/');
-    },
-    htmlToCanvas() {
-      html2canvas(this.$refs.shareContent, {})
+    async htmlToCanvas() {
+      // 确保所有图片加载完成
+      const images = this.$refs.shareContent.querySelectorAll('img');
+      await Promise.all(Array.from(images).map(img => {
+        debugger
+        if (img.complete && img.naturalHeight !== 0) return Promise.resolve();
+        return new Promise((resolve, reject) => {
+          img.addEventListener('load', resolve);
+          img.addEventListener('error', () => reject(new Error(`图片加载失败: ${img.src}`)));
+        });
+      })).catch(error => {
+        console.error('图片预加载错误:', error);
+        this.$toast('图片加载失败，请检查网络连接');
+        throw error;
+      });
+
+      return html2canvas(this.$refs.shareContent, {
+        scale: window.devicePixelRatio || 1,
+        useCORS: true,
+        logging: true,
+        allowTaint: false,
+        backgroundColor: null,
+        imageTimeout: 30000,
+        ignoreElements: (element) => element.id === 'html2canvas',
+        onclone: (clonedDoc) => {
+          clonedDoc.getElementById('html2canvas').style.visibility = 'hidden';
+        }
+      })
         .then((canvas) => {
-          let imageUrl = canvas.toDataURL('image/png'); // 将canvas转成base64图片格式
+          let imageUrl = canvas.toDataURL('image/png');
           this.canvasImageUrl = imageUrl;
-          // this.isDom = false;
+        })
+        .catch(error => {
+          console.error('html2canvas error:', error);
+          this.$toast('生成分享图失败，请稍后重试');
         });
     }
   },
@@ -105,19 +152,18 @@ export default {
 .share {
   width: 100%;
   height: 100%;
-  position: fixed;
-  top: 0;
-  z-index: 9;
   overflow: hidden;
 
   .share-content {
-    background: url(/mobile/static/img/shareBack.07ed8487.png) no-repeat center center;
+    background: url('../assets/shareBack.png') no-repeat center center;
     background-size: cover;
     background-attachment: local;
     width: 100%;
-    height: 100%;
+    // height: 100%;
     padding: vw(45);
-    overflow-y: auto;
+    position: fixed;
+    z-index: -1;
+    padding-bottom: vw(190);
   }
 
   .header {
@@ -175,9 +221,10 @@ export default {
       justify-content: space-between;
 
       img {
-        width: vw(188);
-        height: vw(188);
-        margin-bottom: vw(40);
+        width: 188px;
+        height: 188px;
+        margin-bottom: 15px;
+        background-color: rgba(255, 255, 255, 0.1);
       }
     }
   }
@@ -187,7 +234,6 @@ export default {
     // align-items: center;
     justify-content: center;
     margin-top: vw(100);
-    padding-bottom: vw(190);
 
     .QRcodes {
       width: vw(87);
@@ -200,17 +246,15 @@ export default {
       }
     }
 
-    .right-text {
-      margin-left: vw(12.5);
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    z-index: 9;
+    overflow-y: auto;
 
-      div {
-        color: #ffffff;
-        font-size: vw(24);
-        font-weight: bold;
-      }
+    img {
+      width: 100%;
     }
   }
 }