在微信里，优化保存合影时的交互

src/main.js

@@ -17,7 +17,7 @@ import "@/assets/style/my-reset.css"
 
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
 
-if (!browser.mobile) {
+if (process.env.NODE_ENV !== 'development' && !browser.mobile) {
   location.replace(`${location.origin}/pc/index.html#/`)
 }
 

src/mixins/index.js

@@ -8,6 +8,7 @@ Vue.mixin({
     return {
       isMobile: browser.mobile,
       isWeixin: browser.weixin,
+      // isWeixin: true,
     }
   },
   methods: {

src/views/gui/LandmarkEditor.vue

@@ -33,11 +33,19 @@
         </button>
       </div>
       <button
+        v-if="!isWeixin"
         class="save"
         @click="onClickSave"
       >
         保存
       </button>
+      <button
+        v-if="isWeixin"
+        class="generate"
+        @click="onClickGenerateGroupPhoto"
+      >
+        生成合影
+      </button>
     </div>
     <a
       v-show="false"
@@ -45,6 +53,32 @@
       :href="aDownloadHref"
       download="photo.jpg"
     />
+    <div
+      v-if="isWeixin"
+      v-show="isShowResult"
+      class="resultWrapper"
+    >
+      <button
+        class="close"
+        @click="isShowResult = false"
+      >
+        <img
+          class=""
+          src="@/assets/images/close.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <img
+        class="result"
+        :src="aDownloadHref"
+        alt=""
+        draggable="false"
+      >
+      <div class="tip">
+        长按图片保存
+      </div>
+    </div>
     <van-popup
       v-model="isShowPopup"
       class="popup-bottom"
@@ -83,6 +117,7 @@ export default {
     return {
       aDownloadHref: '',
       isShowPopup: false,
+      isShowResult: false,
     }
   },
   computed: {
@@ -237,19 +272,27 @@ export default {
         window.alert('请上传包含人物的图片')
       })
     },
-    onClickSave() {
-      html2canvas(document.querySelector('.group-photo-wrapper'), {
+    async getGroupPhotoDataUrl() {
+      const canvas = await html2canvas(document.querySelector('.group-photo-wrapper'), {
         useCORS: true, // 【重要】开启跨域配置
         scale: 1,
         allowTaint: true, // 允许跨域图片
         preserveDrawingBuffer: true,
-      }).then((canvas) => {
-        this.aDownloadHref = canvas.toDataURL('image/jpeg', 1.0)
+      })
+      this.aDownloadHref = canvas.toDataURL('image/jpeg', 1.0)
+    },
+    onClickSave() {
+      this.getGroupPhotoDataUrl().then(() => {
         this.$nextTick(() => {
           this.$refs['for-download'].click()
         })
       })
     },
+    onClickGenerateGroupPhoto() {
+      this.getGroupPhotoDataUrl().then(() => {
+        this.isShowResult = true
+      })
+    }
   }
 }
 </script>
@@ -305,7 +348,7 @@ export default {
         color: #A33328;
       }
     }
-    > .save {
+    > .save, .generate {
       margin-top: 4.5vw;
       width: 91.1vw;
       height: 16vw;
@@ -315,6 +358,39 @@ export default {
       color: #fff;
     }
   }
+  .resultWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.9);
+    > button.close {
+      position: absolute;
+      top: 2vw;
+      right: 2vw;
+      width: 10vw;
+      height: 10vw;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    > img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+    }
+    > .tip {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      bottom: 5vh;
+    }
+  }
   > .popup-bottom {
     height: 63.1vw;
     > button {
@@ -331,7 +407,4 @@ export default {
     display: none;
   }
 }
-</style>
-
-http://vibktprfx-prod-prod-damo-eas-cn-shanghai.oss-cn-shanghai.aliyuncs.com/segment-body/2023-05-17/a22f4727-a9e8-47f0-bd9c-ad71bfb0d237/image.png?Expires=1684313991&OSSAccessKeyId=LTAI4FoLmvQ9urWXgSRpDvh1&Signature=galFAcHHalE%2Bm39ckgeyep4OD6o%3D
-http%3A%2F%2Fvibktprfx-prod-prod-damo-eas-cn-shanghai.oss-cn-shanghai.aliyuncs.com%2Fsegment-body%2F2023-05-17%2F082bc112-522a-40e6-90c7-aeca0baf899d%2Fimage.png%3FExpires%3D1684313986%26OSSAccessKeyId%3DLTAI4FoLmvQ9urWXgSRpDvh1%26Signature%3DCgwrX3t%25252BllmZxlZHfCPoxnZNJK4%25253D
+</style>