优化保存图片

shop/perating/activitecode.vue

@@ -54,15 +54,16 @@
         ></image>
         <view class="downLoad-text"> 保存图片 </view>
       </view> -->
+      
+    </view>
     <view class="downLoadButton" @click="clickGeneratePicture2">
-        <image
-          class="downLoad-image"
-          src="../../static/saveImage.png"
-          mode=""
-        ></image>
-        <view class="downLoad-text"> 保存图片 </view>
-      </view>
-      </view>
+      <image
+        class="downLoad-image"
+        src="../../static/saveImage.png"
+        mode=""
+      ></image>
+      <view class="downLoad-text"> 保存图片 </view>
+    </view>
     <!-- ************************* 海报画板 **********************-->
     <view style="position: absolute; bottom: 10%; left: 0%" v-show="flag">
       <l-painter
@@ -341,9 +342,16 @@ export default {
         // 获取 DOM 元素
         const element = document.getElementById('huoquId');
         // 使用 html2canvas 将 DOM 转为 canvas
-        const canvas = await html2canvas(element);
+        const canvas = await html2canvas(element, {
+          scale: 3,         // 渲染缩放倍数（推荐 2-3 倍）
+          dpi: 300,         // 输出DPI (打印级精度)
+          onclone: (clonedDoc) => {
+            // 克隆文档时注入高清样式
+            clonedDoc.body.style.zoom = '100%';
+          }
+        });
         // 将 canvas 转为图片地址
-        const imageUrl = canvas.toDataURL('image/png');
+        const imageUrl = canvas.toDataURL('image/png', 1); // 最高质量压缩
         // 触发下载
         this.downloadFile(imageUrl, 'image.png');
       } catch (error) {
@@ -600,7 +608,7 @@ page {
       .activite-cardBtn {
         width: 546rpx;
         height: 94rpx;
-        background: url("https://cdn.bjtdba.com/vod/image/2022-08-23/20220823140132620.png")
+        background: url("./assets/btn-bg.png")
           no-repeat;
         background-size: 100%;
         color: #ffffff;
@@ -664,27 +672,28 @@ page {
       }
     }
 
-    .downLoadButton {
-      width: 128rpx;
-      height: 165rpx;
-      margin-top: 9rpx;
-      // background-color: red;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+    
+  }
+  .downLoadButton {
+    margin-top: -220rpx;
+    width: 128rpx;
+    height: 165rpx;
+    // background-color: red;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-      .downLoad-image {
-        width: 128rpx;
-        height: 128rpx;
-        position: absolute;
-      }
+    .downLoad-image {
+      width: 128rpx;
+      height: 128rpx;
+      position: absolute;
+    }
 
-      .downLoad-text {
-        margin-top: 128rpx;
-        color: #ffffff;
-        font-size: 26rpx;
-        text-align: center;
-      }
+    .downLoad-text {
+      margin-top: 128rpx;
+      color: #ffffff;
+      font-size: 26rpx;
+      text-align: center;
     }
   }
 }