测肤分享的图片优化

yvan.ni
1 parent e93f44fc
Showing 3 changed files with 32 additions and 31 deletions
packageD/pages/AI-test-skin/success_result/success_result.js
packageD/pages/AI-test-skin/success_result/success_result.wxml
packageD/pages/AI-test-skin/success_result/success_result.wxss
@@ -302,6 +302,7 @@ Page({
                     //-- 获取一下分享要用的图片 --
                     th.set_share_img();
                     acne.get_goods(th, setting.stoid);
+
                     // let { heightRecord, tab } = th.data;
                     // tab.forEach(item => {
                     //     console.log(2);
@@ -779,7 +780,7 @@ Page({
         ///二微码
         var path3 = setting.url + "/api/wx/open/app/user/getWeAppEwm/" +
             setting.stoid + "?sceneValue=" + scene + "&pageValue=packageD/pages/AI-test-skin/success_result/success_result";
-
+        
         // 读取文件成功则OK--
         wx.getImageInfo({
             src: path3,
@@ -793,21 +794,21 @@ Page({
                 context.fillStyle = '#ebf6f8';
                 // 灰色实心矩形
                 // 1. 语法： x坐标, y坐标, 宽度, 高度
-                context.fillRect(0, 0, 750 * rpx, 1338 * rpx);
+                context.fillRect(0, 0, 750 * rpx, 1320 * rpx);
  
                 context.setFontSize(20 * rpx)
                 context.setFillStyle("#00d8e9")
-                context.fillText("官方检测认证", 28 * b * rpx, 80 * b * rpx);
+                context.fillText("官方检测认证", 32 * b * rpx, 80 * b * rpx);
  
                 //两个底部颜色
                 context.fillStyle = '#a7ecf5';
-                context.fillRect(28 * b * rpx, 136 * b * rpx, 262 * b * rpx, 18 * b * rpx);
-                context.fillRect(28 * b * rpx, 194 * b * rpx, 262 * b * rpx, 18 * b * rpx);
+                context.fillRect(32 * b * rpx, 136 * b * rpx, 262 * b * rpx, 18 * b * rpx);
+                context.fillRect(32 * b * rpx, 194 * b * rpx, 262 * b * rpx, 18 * b * rpx);
  
                 context.setFontSize(42 * b * rpx)
                 context.setFillStyle("#070609")
-                context.fillText("我的肌底强韧", 30 * b * rpx, 140 * b * rpx);
-                context.fillText("肌肤鲜活润泽", 30 * b * rpx, 196 * b * rpx);
+                context.fillText("我的肌底强韧", 32 * b * rpx, 140 * b * rpx);
+                context.fillText("肌肤鲜活润泽", 32 * b * rpx, 196 * b * rpx);
  
                 //先画一个圆形
                 th.circle(context, 110 * b * rpx, 280 * b * rpx, 140 * b * rpx, "#e7f3f8");
@@ -816,35 +817,35 @@ Page({
                 context.drawImage(th.data.share_head, 132 * b * rpx, 310 * b * rpx, 230 * b * rpx, 230 * b * rpx);
  
                 //左右俩个框并填充文字
-                th.darwRoundRect(38 * b * rpx, 340 * b * rpx, 140 * b * rpx, 40 * b * rpx, 20 * b * rpx, context);
-                th.darwRoundRect(324 * b * rpx, 340 * b * rpx, 140 * b * rpx, 40 * b * rpx, 20 * b * rpx, context);
-                context.setFontSize(20 * b * rpx)
+                th.darwRoundRect(38 * b * rpx, 340 * b * rpx, 120 * b * rpx, 34 * b * rpx, 17 * b * rpx, context);
+                th.darwRoundRect(324 * b * rpx, 340 * b * rpx, 120 * b * rpx, 34 * b * rpx, 17 * b * rpx, context);
+                context.setFontSize(18 * b * rpx)
                 context.setFillStyle("black")
-                context.fillText("黑眼圈 重度", 50 * b * rpx, 368 * b * rpx);
-                context.fillText("毛孔 " + th.data.pore_num, 336 * b * rpx, 368 * b * rpx);
+                context.fillText("黑眼圈 重度", 50 * b * rpx, 363 * b * rpx);
+                context.fillText("毛孔 " + th.data.pore_num, 340 * b * rpx, 363 * b * rpx);
  
                 //左右俩个框并填充文字
-                th.darwRoundRect(40 * b * rpx, 412 * b * rpx, 116 * b * rpx, 40 * b * rpx, 20 * b * rpx, context);
-                th.darwRoundRect(348 * b * rpx, 412 * b * rpx, 116 * b * rpx, 40 * b * rpx, 20 * b * rpx, context);
+                th.darwRoundRect(40 * b * rpx, 412 * b * rpx, 116 * b * rpx, 34 * b * rpx, 17 * b * rpx, context);
+                th.darwRoundRect(348 * b * rpx, 412 * b * rpx, 116 * b * rpx, 34 * b * rpx, 17 * b * rpx, context);
                 context.setFillStyle("black")
-                context.fillText("黑头 " + th.data.blackhead_num, 52 * b * rpx, 440 * b * rpx);
-                context.fillText("色斑 " + th.data.speckle_num, 354 * b * rpx, 440 * b * rpx);
+                context.fillText("黑头 " + th.data.blackhead_num, 60 * b * rpx, 434 * b * rpx);
+                context.fillText("色斑 " + th.data.speckle_num, 362 * b * rpx, 434 * b * rpx);
  
                 //左右俩个框并填充文字
-                th.darwRoundRect(60 * b * rpx, 484 * b * rpx, 116 * b * rpx, 40 * b * rpx, 20 * b * rpx, context);
-                th.darwRoundRect(328 * b * rpx, 484 * b * rpx, 116 * b * rpx, 40 * b * rpx, 20 * b * rpx, context);
+                th.darwRoundRect(60 * b * rpx, 484 * b * rpx, 116 * b * rpx, 34 * b * rpx, 17 * b * rpx, context);
+                th.darwRoundRect(328 * b * rpx, 484 * b * rpx, 116 * b * rpx, 34 * b * rpx, 17 * b * rpx, context);
                 context.setFillStyle("black")
-                context.fillText("皱纹 " + th.data.wrinkle_num, 74 * b * rpx, 510 * b * rpx);
-                context.fillText("痤疮 " + th.data.acne_num, 344 * b * rpx, 510 * b * rpx);
+                context.fillText("皱纹 " + th.data.wrinkle_num, 74 * b * rpx, 506 * b * rpx);
+                context.fillText("痤疮 " + th.data.acne_num, 350 * b * rpx, 506 * b * rpx);
  
                 //底部的绘制
                 th.darwRoundRect(38 * b * rpx, 650 * b * rpx, 430 * b * rpx, 160 * b * rpx, 10 * b * rpx, context);
                 //绘制二维码
                 context.drawImage(vpath, 60 * b * rpx, 672 * b * rpx, 120 * b * rpx, 120 * b * rpx);
                 context.setFillStyle("black")
-                context.setFontSize(32 * b * rpx)
+                context.setFontSize(27 * b * rpx)
                 context.fillText("美肤管家AI测肤", 200 * b * rpx, 726 * b * rpx);
-                context.setFontSize(22 * b * rpx)
+                context.setFontSize(19 * b * rpx)
                 context.fillText("科学了解皮肤的真实状态", 200 * b * rpx, 766 * b * rpx);
  
                 //把画板内容绘制成图片，并回调 画板图片路径
@@ -854,7 +855,7 @@ Page({
                             x: 0,
                             y: 0,
                             width: 750,
-                            height: 1338,
+                            height: 1320,
                             destWidth: 1.4 * 750 * 750 / th.data.screenWidth,
                             destHeight: 1.4 * 750 * 750 / th.data.screenWidth,
                             canvasId: 'share',
@@ -378,12 +378,12 @@
  
  
 <!-- 二维码显示页面 -->
-<canvas canvas-id='share' style='width:750rpx;height:1338rpx;background-color:white;' wx:if='{{!canvasHidden}}'></canvas>
+<canvas canvas-id='share' style='width:750rpx;height:1320rpx;background-color:white;' wx:if='{{!canvasHidden}}'></canvas>
 <!-- 展示分享图 -->
 <view id="share_show" wx:if="{{share_show}}">
     <view class="cover-layer" bindtap="close_share" style="z-index: 77777"></view>
     <view class="share_content">
-        <view class="sh_close" bindtap="close_share"><text class="iconfont icon-guan"></text></view>
+        <view class="sh_close" bindtap="close_share"><text class="iconfont icon-guan" style="font-size: 22rpx;"></text></view>
         <image src="{{shareImgPath}}" style="width: 100%" mode="widthFix"></image>
         <view class="share_save_btn" bindtap="savePic">保存到相册</view>
     </view>
@@ -412,7 +412,7 @@
         </scroll-view>
     </view>
     <view class="close_icon" bindtap="close_yiwen">
-        <text class="iconfont icon-guan"></text>
+        <text class="iconfont icon-guan" ></text>
     </view>
 </view>
 <!-- 提示 -->
@@ -727,7 +727,7 @@ page {
     z-index: 999999;
     top: 50%;
     left: 50%;
-    width: 70%;
+    width: 75%;
     transform: translate(-50%, -50%);
 }
  
@@ -742,10 +742,10 @@ page {
  
 .sh_close {
     position: absolute;
-    right: 20rpx;
-    top: 20rpx;
-    width: 70rpx;
-    height: 70rpx;
+    right: 34rpx;
+    top: 36rpx;
+    width: 65rpx;
+    height: 65rpx;
     display: flex;
     justify-content: center;
     align-items: center;