效果图：

image-cropper代码包git地址：

https://github.com/wx-plugin/image-cropper

引入：

     1.把从git下载的代码包src下面的文件复制到所需要的项目

    2.打开你所需要引入的页面的json文件，

"disableScroll": true,

  "usingComponents": {

    "image-cropper": "../srccor/image-cropper"

  }

3.打开你所需要引入的页面的wxml文件，

<view class="area-xz">

      <image-cropper id="image-cropper" bindload="cropperload" bindimageload="loadimage" limit_move="{{limit_move}}" disable_rotate="{{disable_rotate}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" angle="{{angle}}" disable_width="{{disable_width}}" disable_height="{{disable_height}}" disable_ratio="{{disable_ratio}}">

          </image-cropper>

    </view>

4.打开你所需要引入的页面的js文件，

data: {

    src:'',

    width: '430',//宽度

    height: '452',//高度

    disable_rotate:true,//是否禁用旋转

    disable_ratio: true,//锁定比例

    limit_move: true,//是否限制移动

    disable_width: true,

    disable_height: true,

  },

onLoad: function (options) {

    this.cropper = this.selectComponent("#image-cropper");

    this.makewidth();//上传图片

  },

onReady: function() {

    this.upload();

  },

makewidth(){

    let that = this;

    wx.getSystemInfo({

      success: function(res) {

        that.setData({

          width: res.windowWidth * 0.78,

          height: res.windowHeight * 0.68,

        })

        that.cropper.setCutCenter();

      },

    });

  },

// 上传照片

  upload(){

    let that = this;

    wx.showLoading({

      title: '加载中',

    })

    wx.chooseImage({

      count: 1,

      sizeType: ['original'],

      sourceType: ['album', 'camera'],

      success(res) {

        const tempFilePaths = res.tempFilePaths;

        //重置图片角度、缩放、位置

        that.cropper.imgReset();

        that.setData({

          src: tempFilePaths

        });

      },

      fail(err){

        wx.hideLoading();

      }

    })

  },

// 取到照片地址

cropperImg1 () {

    this.cropper.getImg((obj)=>{

          console.log(obj.url);

    });

},

参数说明

函数说明