头像上传裁剪

commpents/myprofile/index.js

@@ -85,8 +85,11 @@ Component({
     zhuanchang_note: '请选择专长',
     jianjie_show: false,
     shanchang_show: false,
+    show_cropper: false,
+    img_cropper_src: '',
+    img_cropper_width: 250, //宽度
+    img_cropper_height: 250, //高度
   },
-
   options: {
     addGlobalClass: true,
     styleIsolation: 'apply-shared'
@@ -901,6 +904,16 @@ Component({
       })
     },
     doUploadPhoto(event) {
+      const { file } = event.detail;
+      this.setData({
+        photoEvent: event,
+        img_cropper_src: file.url,
+        show_cropper: true
+      })
+      this.loadimage()
+    },
+    OSSUpload(fileurl){
+      let event = this.data.photoEvent
       console.log("index douploadFIle: ", event);
       const scene = event.currentTarget.dataset.scene;
       const field_name = event.currentTarget.dataset.field_name;
@@ -919,7 +932,7 @@ Component({
         const ossAccessKeyId = response.data.accessid;
         const policy = response.data.policy;
         const key = response.data.dir+filename;
-        const filePath = file.url; // 待上传文件的文件路径。
+        const filePath = fileurl; // 待上传文件的文件路径。
         wx.uploadFile({
           url: host, // 开发者服务器的URL。
           filePath: filePath,
@@ -982,6 +995,29 @@ Component({
     },
     moveZhuanChang(){
       
-    }
+    },
+    cropperload(e) {
+      console.log("cropper初始化完成");
+    },
+    loadimage(e) {
+      this.cropper = this.selectComponent("#image-cropper");
+      //重置图片角度、缩放、位置
+      this.cropper.imgReset();
+      this.triggerEvent('showPageMeta');
+    },
+    clickcut(e) {
+        console.log(e);
+        // //点击裁剪框阅览图片
+        // wx.previewImage({
+        //     current: e.detail.url, // 当前显示图片的http链接
+        //     urls: [e.detail.url] // 需要预览的图片http链接列表
+        // })
+
+      this.OSSUpload(e.detail.url)
+      this.setData({
+        show_cropper: false
+      })
+      this.triggerEvent('hidePageMeta');
+    },
   }
 })

commpents/myprofile/index.json

@@ -21,6 +21,7 @@
     "van-icon": "@vant/weapp/icon/index",
     "van-search": "@vant/weapp/search/index",
     "van-empty": "@vant/weapp/empty/index",
-    "van-image": "@vant/weapp/image/index"
+    "van-image": "@vant/weapp/image/index",
+    "image-cropper": "/commpents/image-cropper/image-cropper"
   }
 }

commpents/myprofile/index.wxml

@@ -365,4 +365,6 @@
         </view>
 
 
-        <van-toast id="van-toast" />
+        <van-toast id="van-toast" />
+
+        <image-cropper show_cropper="{{show_cropper}}" id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{img_cropper_width}}" height="{{img_cropper_height}}" imgSrc="{{img_cropper_src}}" disable_height="{{true}}" disable_width="{{true}}" disable_ratio="{{true}}" min_scale="0.1" max_scale="5" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>