微信小程序图片裁剪 插件we-cropper

git：https://github.com/we-plugin/we-cropper
文档： https://we-plugin.github.io/we-cropper/#/

图片裁剪

下载解压：
文件目录

文件目录

如果在所需要裁剪的页面通过弹出窗口，来使用这个功能的话，我就遇到一个问题在ios真机上面，第一次进入所需裁剪页面裁剪完后隐藏了裁剪的弹窗但是页面无法上拉了，原因查不出来，所以只好将裁剪的功能写在一个新页面中（而且本小程序需要裁剪的页
面挺多的所以写成一个新的页面比较好）

pages里面新建目录cutFace
在index.wxml中代码如下：

// 引入裁剪组件
<import src="/commpents/we-cropper/we-cropper.wxml"/>  


<view class='cut-img-page'>
  <view class='cropper-wrapper-bg'>
    <view style='height: 1rpx;'></view>
      // 因需要ios和安卓上下露出的黑色区域一样需要个兼容（ps: 有可能是我的自定义头部的影响，可以不加，没有影响）
    <view class="cropper-wrapper" style='margin-top: {{ios ? "75px;": "90px"}}'>  
      <template is="we-cropper" data="{{...cropperOpt}}"/>// 传给组件的参数
      <view class="getCropperImage">
        // 取消裁剪、选择图片、裁剪事件
        <view bindtap='cancleCropper'>取消</view><view bindtap='chooseImg'>选择图片</view><view  bindtap="getCropperImage">确定</view>
      </view>
    </view>
  </view>
</view>

在index.wxss中代码如下：

.cropper-wrapper {
  background: #fff;
}

.getCropperImage {
  text-align: center;
  font-size: 32rpx;
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  width: 750rpx;
  padding: 40 0rpx;
  background: #fff;
  z-index: 9999;
}

.getCropperImage > view {
  padding: 0 40rpx;
  color: #919191;
  height: 60px;
  line-height: 60px;
}

.getCropperImage > view:nth-child(2) {
  color: red;
}

.cropper-wrapper-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(0, 0, 0);
  z-index: 22;
}

在index.js中代码如下：

// pages/cutFace/index.js

const WeCropper = require('../../commpents/we-cropper/we-cropper.js')  //引入插件js
const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth 
const system = device.system;
let height; // 我这里要做兼容，各位自己看需要，这里是画布的高度
if (system.indexOf('iOS') != -1) {
  height = device.windowHeight - 100
} else {
  height = device.windowHeight - 50
}
Page({
  data: {
    // 裁剪组件所需要的参数
    cropperOpt: {
      id: 'cropper',
      width,  // 画布宽度
      height, // 画布高度
      scale: 2.5, // 最大缩放倍数
      zoom: 8, // 缩放系数
      cut: {
        x: 0,   // 裁剪区域开始的x坐标
        y: (height - (width / 2))/2,  //  裁剪区域开始的y坐标 （为了裁剪框上下居中）
        width: width,  //裁剪框的宽度 即所需图片的宽度  自己定义
        height: width/2  // 裁剪框的高度   自己定义
      }
    },
    chooseImg: false,
  },

  
  onLoad: function (options) {
    const self = this;
    const system = device.system;
   //    兼容,可不写
    if (system.indexOf('iOS') != -1) {
      this.setData({
        ios: true
      })
    };
    // 多个页面都有裁剪的需求，因此这里在跳转时传递不同的参数，来判断裁剪的是哪一个
    this.setData({
      faceType: options.type
    })
    //  裁剪实例化和配置
    const { cropperOpt } = this.data;
    new WeCropper(cropperOpt)
      .on('ready', (ctx) => {
// 这个是为了刚开始就显示裁剪区域（ps: 我们产品提出的，看好久的源码才添加上的，各位看需要添加）
        self.wecropper.updateCanvas()   
      })
      .on('beforeImageLoad', (ctx) => {
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        wx.hideToast()
      })
  },
// 选择图片事件
  chooseImg() {
    const self = this;
    wx.chooseImage({
      count: 1, 
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], 
      success(res) {
        const src = res.tempFilePaths[0]
        //  裁剪的api
        if (src) {
          self.wecropper.pushOrign(src)
          self.setData({
            chooseImg: true,
          })
        };
        wx.hideToast()
      },
      fail(res) {
        wx.hideToast()
      }
    })
  },
//   裁剪的拖动事件
  touchStart(e) {
    this.wecropper.touchStart(e)
  },
  touchMove(e) {
    this.wecropper.touchMove(e)
  },
  touchEnd(e) {
    this.wecropper.touchEnd(e)
  },
// 裁剪 图片
  getCropperImage() {
    let that = this;
    if (this.data.chooseImg) {
      this.wecropper.getCropperImage((src) => {
        if (src) {
           // 根据裁剪的类型  来设置上一个页面所需图片的地址

          if (this.data.faceType == 1) {
            let pages = getCurrentPages();
          // prevPage  相当于上一个页面的this，可以直接修改上个页面data里面的值
         //  在上个页面的onShow里面可以通过 faceType来判断 和上传图片
        //   你也可以在最后提交数据的时候 再上传图片
            let prevPage = pages[pages.length - 2]  
            prevPage.setData({                                    
              faceType: 1,                                                
              postSrc: src
            })
          } else if (this.data.faceType == 2){
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2]
            prevPage.setData({
              faceType: 2,
              topicSrc: src
            })
          } else if (this.data.faceType == 3) {
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2]
            prevPage.setData({
              faceType: 3,
              car_cover: src
            })
          };
          wx.navigateBack()
        } else {
          wx.hideToast()
          wx.showToast({
            title: '获取图片地址失败，请稍后再试！',
          })
        }
      })
    } else {
      wx.showToast({
        title: '您还没选择图片！',
        icon: 'none'
      })
    }   
  },

  cancleCropper() {
    wx.hideToast()
    wx.navigateBack()
  },
})