日报分享

src/components/share.vue

@@ -62,9 +62,17 @@
         </div>
       </div>
     </div>
-    <div class="html2canvasBox">
-      <div id="html2canvas" ref="html2canvas">
-        <img :src="canvasImageUrl" />
+    <div
+      class="html2canvasBox"
+      style="
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      ">
+      <div id="html2canvas" ref="html2canvas" style="width: 90%; height: 90%">
+        <img :src="canvasImageUrl" width="100%" />
       </div>
     </div>
   </div>
@@ -184,9 +192,8 @@ export default {
     },
     htmlToCanvas() {
       html2canvas(this.$refs.shareContent, {
-        scale: window.devicePixelRatio || 1,
+        scale: 1,
         useCORS: true,
-        logging: true,
         allowTaint: false,
         backgroundColor: null,
       })
@@ -223,10 +230,10 @@ export default {
   width: 100%;
   height: 100%;
   // overflow: hidden;
-  position: fixed;
-  top: 0;
+  // position: fixed;
+  // top: 0;
   // z-index: -1;
-  overflow-y: auto;
+  // overflow-y: auto;
 
   .share-content {
     background: url('../assets/shareBack.png') no-repeat center center;
@@ -353,19 +360,19 @@ export default {
   .html2canvasBox {
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    // position: absolute;
-    // top: 0;
-    // z-index: 9;
+    margin: 0 auto;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
   }
   #html2canvas {
-    width: 100%;
-    height: 50%;
-    overflow-y: auto;
-
+    // overflow: hidden;
+    width: 90%;
+    height: 100%;
     img {
       width: 100%;
-      height: auto;
     }
   }
 }