Browse Source

feature:修改壁纸的裁剪画布UI

zeng.chen 7 tháng trước cách đây
mục cha
commit
e8533bf8b6

+ 11 - 5
pages/piano/wallpaper/wallpaper.js

@@ -55,7 +55,7 @@ Page({
     },
     src: '',
     showProgress: false,
-    showCropImg: false,
+    showCropImg: true,
     width: 250,//宽度
     height: 250,//高度
     _imageBuffer: null,
@@ -97,8 +97,14 @@ Page({
               cropScale: '1:1', // 裁剪比例
               success(res) {
                 console.log("裁剪后的图片", res)
+                that.setData({
+                  showCropImg: true,
+                  topImg: { "pic": res.tempFilePath }
+                })
                 that.convertImageToRGB565(res.tempFilePath)
-              }
+
+              },
+
             })
           }
         })
@@ -113,8 +119,8 @@ Page({
     const ctx = wx.createCanvasContext('imageCanvas');
     // const ctx = Canvas.getContext('imageCanvas');
     let _this = this;
-    let width = 400;
-    let height = 400;
+    let width = 533;
+    let height = 533;
     try {
       // 设置 Canvas 尺寸
       // _this.setData({ canvasWidth: width, canvasHeight: height });
@@ -275,7 +281,7 @@ Page({
           progress: 0,
           progressPercent: 0,
           showProgress: false,
-          showCropImg: false
+          // showCropImg: false
         });
         wx.showToast({
           title: '图片上传成功',

+ 2 - 2
pages/piano/wallpaper/wallpaper.wxml

@@ -1,9 +1,9 @@
 <!-- pages/piano/wallpaper/wallpaper.wxml -->
 <view class="container">
     <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{navbarData}}'></nav-bar>
-    <view wx:if="{{imageList.length>0}}" class="img_section">
+    <view class="img_section">
         <image wx:if="{{!showCropImg}}" src="{{topImg.pic}}" class="select_img"></image>
-        <canvas wx:if="{{showCropImg}}" class="select_img" canvas-id="imageCanvas"></canvas>
+        <canvas wx:if="{{showCropImg}}" class="canvas_img" canvas-id="imageCanvas"></canvas>
         <image src="../../../images/common/icon_sel.png" class="select_icon"></image>
     </view>
     <view class="grid-container">

+ 11 - 1
pages/piano/wallpaper/wallpaper.wxss

@@ -11,7 +11,17 @@
 
 .select_img {
     width: 533rpx;
-    height: 400rpx;
+    height: 533rpx;
+    border-radius: 16rpx;
+    background-color: #F2F5F7;
+    overflow: hidden;
+}
+
+.canvas_img {
+    margin-top: 32rpx;
+    margin-left: 108rpx;
+    width: 533rpx;
+    height: 533rpx;
     border-radius: 16rpx;
     background-color: #F2F5F7;
     overflow: hidden;