bug

src/saas/AppCountryAlbum/Watermark.vue

@@ -10,7 +10,12 @@
     </div>
     <div ref="waterMarker" class="waterMarker-wrapper" :style="{height: canvasHeight + 'px'}">
       <image class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
-      <div class="watermark" :style="{left: x + 'px', top: y + 'px' }" v-if="currIndex > -1 && currWatermarkConfig.length" @touchstart="onTouchstart" @touchmove="onTouchmove">
+      <div
+        class="watermark"
+        v-if="currIndex > -1 && currWatermarkConfig.length"
+        :style="{left: x + 'px', top: y + 'px' }"
+        @touchstart="onTouchstart"
+        @touchmove="onTouchmove">
         <component :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
       </div>
     </div>
@@ -166,7 +171,7 @@
         this.isHide = true
         this.$loading()
         this.$nextTick(() => {
-          html2canvas(this.$refs.photo, {
+          html2canvas(this.$refs.waterMarker, {
             allowTaint: true,
             useCORS: true
           }).then((canvas) => {
@@ -304,9 +309,12 @@
 
 <style lang="scss" scoped>
   .photo {
+    display: flex;
     position: relative;
+    align-items: center;
+    justify-content: center;
     width: 100%;
-    height: 800px;
+    height: 100vh;
     background: #333;
     overflow: hidden;
 
@@ -320,23 +328,19 @@
     }
 
     .waterMarker-wrapper {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      z-index: 1;
       width: 100%;
-      transform: translate(-50%, -50%);
+      max-height: 100vh;
       overflow: hidden;
 
       .waterMarker-img {
         width: 100%;
-        // max-height: 100vh;
+        max-height: 100vh;
       }
 
       .watermark {
         position: absolute;
         left: 32px;
-        z-index: 111;
+        z-index: 11;
         color: #FFFFFF;
         font-size: 28px;
       }
@@ -378,7 +382,7 @@
       position: fixed;
       bottom: 0;
       left: 0;
-      z-index: 11;
+      z-index: 111;
       width: 100%;
       height: 474px;
       background: #FFFFFF;