feature：修改壁纸的裁剪方法

pages/components/imageCrop/index.js

@@ -11,7 +11,7 @@ Component({
      */
     cropperRatio: {
       type: Number,
-      value: 0.7
+      value: 1
     },
 
     /**
@@ -109,7 +109,7 @@ Component({
 
         IS_TOUCH_CONTENT: false,  // 是否是可拖动的状态（拖拽裁剪框）
         IS_TOUCH_SIDE: false,  // 是否可以拖拽边框
-        IS_NO_DRAG: false, 
+        IS_NO_DRAG: false,
 
         // 拖拽区域的时候设置
         TOUCH_OFFSET_X: null, // 手按下相对于裁剪框左边的距离
@@ -172,11 +172,14 @@ Component({
      */
     getImage() {
       const _this = this
-      wx.chooseImage({
-        success: function (res) {
+      wx.chooseMedia({
+        count: 1,
+        mediaType: ['image'],
+        sourceType: ['album'],
+        success(res) {
           _this.setData({
             isShowImg: false,
-            filePath: res.tempFilePaths[0],
+            filePath: res.tempFiles[0].tempFilePath,
           })
           _this.loadImage(_this.data.filePath)
         },
@@ -192,7 +195,6 @@ Component({
       wx.showLoading({
         title: '图片加载中...',
       })
-      // console.log(this.properties.imageSrc)
       wx.getImageInfo({
         src: src ? src : this.properties.imageSrc,
         success: function (res) {
@@ -211,14 +213,14 @@ Component({
           const p = _this.initPosition()
 
           // 根据图片的宽高显示不同的效果 保证图片可以正常显示 (横屏)
-          // console.log(_this.conf.IMG_RATIO)
-          // console.log(_this.conf)
-          // console.log(_this.drag)
-          // console.log(_this.data)
-          // console.log(p)
+          console.log(_this.conf.IMG_RATIO)
+          console.log(_this.conf)
+          console.log(_this.drag)
+          console.log(_this.data)
+          console.log(p)
           if (_this.conf.IMG_RATIO >= 1) {
             _this.conf.CROPPER_WIDTH = _this.properties.cropperWidth
-            _this.setData ({
+            _this.setData({
               cropperW: _this.properties.cropperWidth,
               cropperH: _this.conf.CROPPER_HEIGHT,
 
@@ -236,7 +238,7 @@ Component({
             })
           } else {
             // 竖屏初始化
-            _this.setData ({
+            _this.setData({
               cropperW: _this.conf.CROPPER_WIDTH,
               cropperH: _this.conf.CROPPER_HEIGHT,
 
@@ -262,7 +264,7 @@ Component({
           })
 
           wx.hideLoading()
-        } 
+        }
       })
     },
 
@@ -364,7 +366,7 @@ Component({
           }
         }
         // 否则
-        const bottomTop = Math.ceil((this.conf.CROPPER_HEIGHT  - (this.properties.cropperWidth / this.properties.cutRatio)) / 2)
+        const bottomTop = Math.ceil((this.conf.CROPPER_HEIGHT - (this.properties.cropperWidth / this.properties.cutRatio)) / 2)
         return {
           left: 0,
           right: 0,
@@ -395,7 +397,7 @@ Component({
           bottom: 0
         }
       }
-      const bottomTop = Math.ceil((this.conf.CROPPER_HEIGHT  - (this.conf.CROPPER_WIDTH / this.properties.cutRatio)) / 2)
+      const bottomTop = Math.ceil((this.conf.CROPPER_HEIGHT - (this.conf.CROPPER_WIDTH / this.properties.cutRatio)) / 2)
       return {
         left: 0,
         right: 0,
@@ -492,7 +494,7 @@ Component({
       this.drag.SPACE_RIGHT_POSITION = this.conf.CROPPER_WIDTH - this.conf.CUT_L - this.conf.CUT_MIN_W
       this.drag.SPACE_LEFT_POSITION = this.conf.CROPPER_WIDTH - this.conf.CUT_R - this.conf.CUT_MIN_W
     },
-    
+
     /**
      *  拖拽中
      */
@@ -697,7 +699,7 @@ Component({
       }
     },
   },
-  
+
   created: function () {
     this.initStaticData()
     // console.log(this.drag)

pages/components/imageCrop/index.wxml

@@ -1,4 +1,4 @@
-<!--cropper/cropper.wxml-->
+<!-- cropper/cropper.wxml -->
 <view class="wx-content-info">
   <view class='cropper-content'>
     <view wx:if="{{showImg}}" class="wx-corpper" style="background:#000;">
@@ -8,7 +8,7 @@
           <image src="{{filePath}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
         </view>
         <view class="wx-corpper-crop-box" bind:touchstart="contentDragStart" bind:touchmove="contentDragMove" bind:touchend="contentTouchEnd" style="left:{{cutL}}rpx;top:{{cutT}}rpx;right:{{cutR}}rpx;bottom:{{cutB}}rpx">
-        <!-- <view class="wx-corpper-crop-box" bind:touchstart="contentDragStart" bind:touchmove="contentDragMove" bind:touchend="contentTouchEnd" style="width:{{cropperW - cutL - cutR}}rpx;height:{{cropperH - cutT- cutB}}rpx; transform: translateX({{cutL}}rpx) translateY({{cutT}}rpx);"> -->
+          <!-- <view class="wx-corpper-crop-box" bind:touchstart="contentDragStart" bind:touchmove="contentDragMove" bind:touchend="contentTouchEnd" style="width:{{cropperW - cutL - cutR}}rpx;height:{{cropperH - cutT- cutB}}rpx; transform: translateX({{cutL}}rpx) translateY({{cutT}}rpx);"> -->
           <view class="wx-cropper-view-box">
             <!-- <view class="wx-cropper-view-box-img" style="width:100%;height:100%" hover-class="none" hover-stop-propagation="false">
               <image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx; transform: translateX({{-cutL}}rpx) translateY({{-cutT}}rpx);"></image>
@@ -33,10 +33,9 @@
     </view>
   </view>
   <view class='cropper-config'>
-    <text class="cropper-cancle" bindtap="close">取消</text>
-    <text class="cropper-cancle" bindtap="getImage">选择图片</text>
-    <text class="cropper-save" bindtap="getImageInfo">完成</text>
+    <text class="cropper-cancle cropper-cancel-color" bindtap="close">取消</text>
+    <!-- <text class="cropper-cancle" bindtap="getImage">选择图片</text> -->
+    <text class="cropper-save cropper-save-color" bindtap="getImageInfo">确定</text>
   </view>
-  <canvas canvas-id="wxCropperCanvas"
-          style="position:absolute; width:{{qualityWidth}}px;height:{{qualityWidth / innerAspectRadio }}px;top:-9999px;left:-9999px;"></canvas>
-</view>
+  <canvas canvas-id="wxCropperCanvas" style="position:absolute; width:{{qualityWidth}}px;height:{{qualityWidth / innerAspectRadio }}px;top:-9999px;left:-9999px;"></canvas>
+</view>

pages/components/imageCrop/index.wxss

@@ -11,6 +11,7 @@ Page {
   /* 裁剪所有的背景色 */
   --cropper-bg: #000;
 }
+
 .wx-content-info {
   position: fixed;
   top: 0;
@@ -19,6 +20,7 @@ Page {
   bottom: 0;
   background: var(--cropper-bg);
 }
+
 .wx-content-info .cropper-content {
   min-height: calc(20%);
   width: 720rpx;
@@ -34,6 +36,7 @@ Page {
   z-index: 2;
   bottom: 88rpx;
 }
+
 .wx-content-info .cropper-content .wx-corpper {
   position: relative;
   overflow: visible;
@@ -45,10 +48,12 @@ Page {
   -webkit-touch-callout: none;
   box-sizing: border-box;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content {
   position: relative;
   /* 内部的信息 */
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-content-bg {
   display: block;
   width: 100%;
@@ -61,7 +66,8 @@ Page {
   margin: 0 auto;
   position: relative;
 }
-.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-content-bg .mask{
+
+.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-content-bg .mask {
   position: absolute;
   top: 0;
   left: 0;
@@ -69,6 +75,7 @@ Page {
   bottom: 0;
   background: rgba(0, 0, 0, 0.7);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box {
   position: absolute;
   top: 0;
@@ -111,6 +118,7 @@ Page {
   border-top: 1px dashed var(--primary-color-dashed);
   border-bottom: 1px dashed var(--primary-color-dashed);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-dashed-v {
   position: absolute;
   left: 33.33333333%;
@@ -120,6 +128,7 @@ Page {
   border-left: 1px dashed var(--primary-color-dashed);
   border-right: 1px dashed var(--primary-color-dashed);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-t {
   position: absolute;
   display: block;
@@ -131,6 +140,7 @@ Page {
   opacity: 0.1;
   cursor: n-resize;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-t::before {
   content: '';
   position: absolute;
@@ -144,6 +154,7 @@ Page {
   background: transparent;
   z-index: 11;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-r {
   position: absolute;
   display: block;
@@ -155,6 +166,7 @@ Page {
   height: 100%;
   cursor: e-resize;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-r::before {
   content: '';
   position: absolute;
@@ -168,6 +180,7 @@ Page {
   background: transparent;
   z-index: 11;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-b {
   position: absolute;
   display: block;
@@ -179,6 +192,7 @@ Page {
   opacity: 0.1;
   cursor: s-resize;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-b::before {
   content: '';
   position: absolute;
@@ -192,6 +206,7 @@ Page {
   background: transparent;
   z-index: 11;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-l {
   position: absolute;
   display: block;
@@ -203,6 +218,7 @@ Page {
   height: 100%;
   cursor: w-resize;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-l::before {
   content: '';
   position: absolute;
@@ -216,6 +232,7 @@ Page {
   background: transparent;
   z-index: 11;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-point {
   width: 5px;
   height: 5px;
@@ -224,12 +241,14 @@ Page {
   position: absolute;
   z-index: 3;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-t {
   top: -3px;
   left: 50%;
   margin-left: -3px;
   cursor: n-resize;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-r {
   top: 50%;
   left: 100%;
@@ -237,6 +256,7 @@ Page {
   margin-top: -3px;
   cursor: n-resize;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr,
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb,
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl,
@@ -248,26 +268,31 @@ Page {
   z-index: 1112;
   opacity: 1;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb {
   right: 0;
   bottom: 0;
   -webkit-transform: translate3d(50%, 50%, 0);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr {
   right: 0;
   top: 0;
   -webkit-transform: translate3d(50%, -50%, 0);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl {
   left: 0;
   bottom: 0;
   -webkit-transform: translate3d(-50%, 50%, 0);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt {
   top: 0;
   left: 0;
   -webkit-transform: translate3d(-50%, -50%, 0);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb::before,
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb::after,
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr::before,
@@ -280,54 +305,63 @@ Page {
   position: absolute;
   background-color: var(--primary-color);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb::before {
   width: 6rpx;
   height: 30rpx;
   right: calc(44%);
   bottom: calc(44%);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb::after {
   height: 6rpx;
   width: 30rpx;
   right: calc(44%);
   bottom: calc(44%);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr::before {
   width: 6rpx;
   height: 30rpx;
   right: calc(44%);
   top: calc(44%);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr::after {
   height: 6rpx;
   width: 30rpx;
   right: calc(44%);
   top: calc(44%);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl::before {
   width: 6rpx;
   height: 30rpx;
   left: calc(44%);
   bottom: calc(44%);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl::after {
   height: 6rpx;
   width: 30rpx;
   left: calc(44%);
   bottom: calc(44%);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt::before {
   width: 6rpx;
   height: 30rpx;
   left: calc(44%);
   top: calc(44%);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt::after {
   height: 6rpx;
   width: 30rpx;
   left: calc(44%);
   top: calc(44%);
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-b {
   left: 50%;
   top: 100%;
@@ -335,6 +369,7 @@ Page {
   margin-top: -3px;
   cursor: n-resize;
 }
+
 .wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-l {
   left: 0%;
   top: 50%;
@@ -342,26 +377,45 @@ Page {
   margin-top: -3px;
   cursor: n-resize;
 }
+
 .wx-content-info .cropper-config {
   position: absolute;
-  bottom: 0;
+  bottom: 100rpx;
   left: 0;
   right: 0;
-  height: 80rpx;
+  height: 88rpx;
   z-index: 3;
-  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid rgba(255, 255, 255, 0.12);
+margin-left: 102rpx;
+margin-right: 102rpx;
 }
+
 .wx-content-info .cropper-config .cropper-cancle,
 .wx-content-info .cropper-config .cropper-save {
   color: #fff;
   font-size: 26rpx;
   padding: 15rpx 25px;
   display: block;
+  font-weight: bold;
+  width: 218rpx;
+  border-radius: 44rpx;
+  text-align: center;
+
+}
+
+.cropper-save-color {
+  background: #6546A3;
+}
+
+.cropper-cancel-color {
+  margin-right: 112rpx;
+  background: rgba(0, 0, 0, 0.4);
 }
+
+
+
+
 /* 裁剪框预览内容 */
 .wx-cropper-viewer {
   position: relative;
@@ -369,7 +423,8 @@ Page {
   height: 100%;
   overflow: hidden;
 }
+
 .wx-cropper-viewer image {
   position: absolute;
   z-index: 2;
-}
+}

pages/piano/wallpaper/wallpaper.js

@@ -40,46 +40,23 @@ Page({
 
   }, footerTap() {
     const that = this;
-    wx.chooseImage({
-      count: 1, // 最多可以选择的图片张数
-      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
-      sourceType: ['album'], // 从相册选择
-      success: function (res) {
-        const tempFilePaths = res.tempFilePaths;
-        //         console.log('获取图片信息成功', res);
-        // wx.cropImage({
-        //   src: tempFilePaths[0], // 图片路径
-        //   cropScale: '1:1', // 裁剪比例
-        //   success: (res) => {
-        //     console.log('裁剪成功', res);
-
-        //     that.setData({
-        //       src: res.tempFilePath
-        //     })
-        //   }
-        // })
-
-        wx.getImageInfo({
-          src: tempFilePaths[0],
-          success: function (imageInfo) {
-            console.log('获取图片信息成功', imageInfo);
-            //获取到image-cropper实例
-            //开始裁剪
-            that.setData({
-              src: imageInfo.path,//要裁剪的图片
-              showCrop: true
-            })
-
-          },
-          fail: function (err) {
-            console.error('获取图片信息失败', err);
-          }
-        });
-      },
-      fail: function (err) {
-        console.error('选择图片失败', err);
+
+    wx.chooseMedia({
+      count: 1,
+      mediaType: ['image'],
+      sourceType: ['album'],
+      // camera: 'back',
+      success(res) {
+        console.log(res.tempFiles[0].tempFilePath)
+        console.log(res.tempFiles[0].size)
+
+        that.setData({
+          imageSrc: res.tempFiles[0].tempFilePath, // 图片路径
+          showCrop: true
+        })
       }
-    });
+    })
+
   },
 
 
@@ -152,10 +129,16 @@ Page({
     })
   },
   hideCut(e) {
+    const img = arguments[0].detail
+    if (img && img.path) {
+      console.log("裁剪图片：", img)
+    }
+
     this.setData({
-      src: "",//要裁剪的图片
+      imageSrc: "",//要裁剪的图片
       showCrop: false
     })
+
   },
   startImage() {
     BtHelper.sendData(BtCmd.wallPaper(1));

pages/piano/wallpaper/wallpaper.wxml

@@ -15,9 +15,9 @@
         <view>上传图片</view>
     </view>
     <!-- <image-cropper wx:if="{{scr}}" imageSrc="{{src}}"></image-cropper> -->
-    <my-cropper bind:close="hideCut" cutRatio="1" wx:if="{{showCrop}}" imageSrc="{{src}}" />
     <!-- <view wx:if="{{src}}" class='bottom'>
         <button catchtap='updateImage'>更换照片</button>
         <button type="primary" bindtap='submit'>确定裁剪</button>
     </view> -->
+    <image-cropper bind:close="hideCut" cutRatio="1" wx:if="{{showCrop}}" imageSrc="{{imageSrc}}" />
 </view>